📚

OCIとcode-serverを使って永久無料の高スペックの開発環境を構築する

2022/10/06に公開約4,200字

前説

私の仕事都合上、使用しているPCはWindowsであり、普段個人用に使用するPCはMacである。
社用PCと個人PCはOSが異なっており、会社のプロジェクト都合もあり開発環境の言語、SDK、フレームワークのバージョンは自宅PCと合わせるのはなかなか難しい。

ホームネットワークを公開して、会社PCから自宅PCへVPN接続する手もあるが会社のネットワークは制限がかかっており、自宅PCにリモートアクセス不可能である。
あと、個人的に自宅ネットワークに不必要に公開して脆弱性を晒すことにも抵抗を感じる。

そこでクラウド上にWebブラウザ経由でアクセスできる開発環境を構築できないかを調査したところ、Oracle Cloud + code-server を組合せば、無料で高スペック環境ができることを発見し、その手法を本記事に記す。

概要

環境の構成は下図通りである。

Oracle Cloud Infrastructure上で外部公開するVM(バーチャルマシン)を作成し、そのマシンにVisual Studio Code に似ているCode-serverを導入してWebブラウザーからアクセスできるようにする。

ブラウザとネットワークさえあれば、場所や端末に関係なく、いつでもどこでも開発できる。
また、作業途中の状態のまま中断から簡単に再開可能である。

Webアクセスする際はIPでも問題ないが、できればドメインからアクセスすることが望ましい。

そのため、本記事の手順実施にあたり必要なものは以下である。

  • Oracle Cloud Infrastructureのアカウント
  • 独自ドメイン(任意)

VM作成

OCI 登録

Oracle Cloudは現在でも気前よく以下のサービスを永久無料で利用できる。

#### Infrastructure
2 AMD based Compute VMs with 1/8 OCPU** and 1 GB memory each

Arm-based Ampere A1 cores and 24 GB of memory usable as 1 VM or up to 4 VMs with 3,000 OCPU hours and 18,000 GB hours per month

2 Block Volumes Storage, 200 GB total

10 GB Object Storage – Standard

10 GB Object Storage – Infrequent Access

10 GB Archive Storage

Resource Manager: managed Terraform

5 OCI Bastions

まずはOracle Cloudに登録することから始まる。
登録方法は本記事では取り扱わないため、下記の記事に参考すること。

Oracle cloud -アカウントの登録

インスタンス構築

下記のOracle公式の手順(3.インターネット・アクセスの有効化まで行う)に従えば問題ない。

Free Tier: UbuntuインスタンスへのWordPressのインストール

ただし、作成するVMタイプは最新のUbuntuにし、CPUもARMにすることで高スペックな環境が作成可能。

  • OS イメージ : Ubuntu 22.04
  • CPU : Arm
  • ボリューム : 100GB
  • CPUコア数 : 4コア以下
  • メモリ : 24GB以下

私の場合は欲張らずにCPU : 2コア, メモリ : 8GBに抑えている構成となっている。

また、WebからSSL接続するため、VCNのイングレス・ルールの作成 の部分で 443ポート も解放しておくことを推奨する。

IPとドメインの紐付け

自分で独自ドメインを持っている場合、作成したインスタンスのIPとドメインの紐付けのDNSレコード登録を行う。
私はCloud flareでドメイン管理しており、参考URLを以下に載せておく。

https://www.cloudflare.com/ja-jp/learning/dns/dns-records/

VM設定

OS最新化

インスタンス作成完了後に、sshでアクセスしOSの最新化を実施しておく。

sudo apt -y update && sudo apt -y upgrade && sudo apt -y autoremove 

iptables追加

OCI のUbuntuインスタンスはufwを用いてポートを開放できない問題があるので、iptablesを設定しておく。参考

-A INPUT -p tcp -m state --state NEW -m tcp --dport 22 -j ACCEPT
-A INPUT -p tcp -m state --state NEW -m tcp --dport 80 -j ACCEPT
-A INPUT -p tcp -m state --state NEW -m tcp --dport 443 -j ACCEPT

sudo iptables-restore < /etc/iptables/rules.v4

code-server導入

code-serverのインスールコマンドを実施し、サービス化しておく。

curl -fsSL https://code-server.dev/install.sh | sh
sudo systemctl enable --now code-server@$USER

設定ファイルを編集して、code-serverの認証パスワードとポートを変更する。

sudo nano .config/code-server/config.yaml
bind-addr: 0.0.0.0:8888

auth: password

password: *****

cert: false

設定変更完了後にサービスを開始する。

sudo systemctl start code-server@$USER

WebサーバーCaddyの導入

code-serverをWebサーバーからアクセスできるようにCaddyのインストールと設定を行う。

sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https 
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg 
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list 
sudo apt update 
sudo apt install caddy

Caddyの設定を修正してcode-serverへ転送するようにする。

sudo nano /etc/caddy/Caddyfile
your_domin.com {
    reverse_proxy 127.0.0.1:8888
}

最後にCaddyを再起動する。

sudo systemctl restart caddy

まとめ

本記事の手順を全て無事に完了していれば、Webブラウザーからドメインアクセスすれば、code-serverのパスワード認証画面が表示される。

パスワードは [### code-server導入]で設定したものである。

ログインしたらVisual Studio Codeと同じUIが表示され、あとは拡張機能入れるなり設定を弄るなり、自分好みに環境をカスタマイズすることができる。

それでは、 Enjoy your coding life !!

IT

Discussion

ログインするとコメントできます