EC2+Visual Studio Code+Django開発環境構築
これまでCloud9で開発してきましたが、新規アカウント発行が停止されたので、その代替策を検討し、AWSのEC2インスタンスに開発環境を立てて、ローカルMacのVSCodeから接続する方法にしました。以下で、その手順を説明していきます。この構成にしたのは、今後、VSCodeにGitHub CopilotやAIアシスタントClineを搭載することを視野に入れたためです。
- 開発サーバ：AWS EC2
- 開発ツール：ローカルMacのVSCode（Visual Studio Code）
- フレームワーク：Django
- デプロイ：Heroku
- バージョン管理：Git + GitHub
設定手順
ステップ1：ネットワーク構築
まずはネットワークの構築です。AWS VPCダッシュボードから設定いきましょう。（※事前にAWSクラウドのアカウントを作成してください。）
1-1 VPCを作成する
「お使いのVPC」→「VPCを作成」とクリックしていきます。以下の設定をしたら「VPCを作成」をクリック。なお、リージョンは米国バージニア北部（us-east-1）で作成しています。
- 名前タグ：infra-vpc
- IPv4 CIDR：192.168.0.0/16
1-2 サブネットを作成する
次にサブネットです。「サブネット」→「サブネットを作成」と進んでいきます。以下の設定をしたら「サブネットを作成」をクリック。
- VPC ID：infra-vpc
- サブネット名：infra-public-subnet-ue1
- IPv4 サブネット CIDR ブロック：192.168.10.0/24
1-3 インターネットゲートウェイを作成する
開発環境にはローカルMacから接続しますのでインターネットゲートウェイが必要です。「インターネットゲートウェイ」→「インターネットゲートウェイの作成」と進みます。以下の設定をしたら「インターネットゲートウェイの作成」をクリック。
- 名前タグ：infra-igw
インターネットゲートウェイを作成したら「VPCにアタッチ」でinfra-vpcを設定します。
1-4 ルートテーブルを作成する
最後にルートテーブルを作成します。「ルートテーブル」→「ルートテーブルを作成」と進みます。
- 名前：infra-public-route
ルートテーブルを作成したら、サブネットinfra-public-subnet-ue1に関連付けて、ルートに以下を追加します。これでネットワーク構築は完了です。
- 送信先：0.0.0.0/0
- ターゲット：infra-igw
ステップ2：サーバ構築
2-1 EC2インスタンスを作成する
次にAWS EC2コンソールから開発サーバを構築していきます。「インスタンス」→「インスタンスを起動」と進みます。以下を設定して「インスタンスを起動」をクリックします。
- 名前：infra-dev-<project> ※<project>にはプロジェクト名を入れてください
- AMI：Amazon Linux 2023 AMI
- インスタンスタイプ：t2.micro
- キーペア：infra-ssh-key ※以下で補足
- ネットワーク設定
- VPC：infra-vpc
- サブネット：infra-public-subnet-ue1
- パブリックIPの自動割り当て：有効化
- セキュリティグループ：セキュリティグループを作成
- セキュリティグループ名：infra-dev
- インバウンドセキュリティグループのルール ※以下で補足
- 高度なネットワーク設定
- ネットワークインターフェイス 1 – プライマリ IP：192.168.10.11
画面途中、キーペア (ログイン) で「新しいキーペアの作成」をクリックします。キーペア名をinfra-ssh-keyにしてキーペアを作成します。作成後、プライベートキーファイルがダウンロードされるので取っておいてください。
セキュリティグループのインバウンドセキュリティグループのルールはデフォルトのままで大丈夫ですが、すべての IP アドレスからのアクセスが許可される設定のため、ローカルMacのIP アドレスに限定した方が安全です。
2-2 IPアドレス固定する
EC2インスタンスのパブリック IPv4 アドレスは設定しないと起動ごとに変わってしまうため、IPアドレスを固定するための設定を行います。EC2コンソールの「Elastic IP」→「Elastic IPアドレスを割り振る」に進みます。ネットワークボーダーグループがus-east-1であることを確認して、特に何も変更せず「割り振る」ボタンをクリックします。Elastic IPアドレスが作成されたら「Elastic IP アドレスを関連付ける」に進み、以下を設定して「関連付ける」をクリックします。これで開発サーバの構築は完了です！
- インスタンス：infra-dev-<project>
- プライベート IP アドレス：192.168.10.11
ステップ3：VSCodeからEC2に接続
3-1 ターミナルでSSH接続を確認する
VSCodeから接続する前に、ターミナルからSSH接続を試します。まずは、キーペア作成でダウンロードしたプライベートキーファイルを~/django-dev/infra-ssh-key.pemに配置します。django-devフォルダの作成もお願いします。
次に、プライベートキーファイルのパーミッションを400に変更して、SSH接続できるかを確認します。以下のように表示されたらSSH接続が問題なくできています。
# ターミナル
chmod 400 ~/django-dev/infra-ssh-key.pem
ssh -i ~/django-dev/infra-ssh-key.pem ec2-user@<Elastic IPで設定したパブリックIPv4アドレス>
3-2 VSCodeから接続する
VSCodeをダウンロードしたら「Extensions」をクリックして、以下のExtensionをインストールして、再起動してください。
- Japanese Language Pack for Visual Studio Code
- Remote – SSH
再起動したら次に以下のようにConfigファイルのディレクトリを指定します。
- Command Palette（Cmd + Shift + P）を呼び出す
- Remote-SSHと入力して「Remote-SSH: Settings」をクリック
- Remote.SSH: Config Fileのディレクトリを「~/django-dev/config」に変更
django-devフォルダにconfigファイルを作成して、以下の内容を記述します。
# django-dev/config
Host infra-dev-<プロジェクト名>
HostName <Elastic IPで設定したパブリックIPv4アドレス>
IdentityFile ~/django-dev/infra-ssh-key.pem
User ec2-userVSCodeに戻って「Remote Explore」をクリックするとSSHの下にinfra-dev-<プロジェクト名>が表示されますので、クリックします。左下にinfra-dev-<プロジェクト名>（ここではinfra-dev-taskup）が表示されれば、SSH接続完了です！
参考資料
コメント