エンジニアのはしがき

プログラミングの日々の知見を書き連ねているブログです

VSCodeからSSH接続してEC2を開発環境にしてしまおう

実は以前からこの開発環境でコーディングしていたのですが ブログの記事としては記述していなかったので、改めてまとめてみます。

EC2の月額料金が許容できるのならお手軽にLinux開発環境が出来るのでおすすめです。

動作環境

前提条件

  • EC2インスタンスは作成済みで実行中になっている
  • EC2インスタンスにはElastic IP(固定IP)が設定されている
  • ローカルにsshコマンドが利用できるCUI環境がある
  • ローカルにVSCodeはインストール済み

条件を満たさない場合は別途ご準備ください。

VSCodeでEC2接続するまで

EC2へのSSH接続を確立する

接続用のキーをローカルにダウンロードし~/.sshの中に配置します。 その後、~/.ssh/configを編集または新規作成して接続情報を事前にファイルに記述しておきます。

以下はその例です。

~/.ssh/config

# ssh接続する際に使用する任意の名前。区別しやすい名前をつけるのがおすすめです。
Host ec2-develop-linux
  # SSH接続先のパブリックIP
  HostName ***.***.***.***
  # SSH接続の為のキーのパス
  IdentityFile ~/.ssh/*************.pem
  # 接続先のLinuxユーザー名。デフォルトではec2-userが用意されています。
  User ec2-user

SSH接続が成功するかどうかCUIで確認しておきます。

# configファイルに指定したHostを指定してSSH接続
$ ssh ec2-develop-linux
Last login: Sat Oct 23 14:05:54 2021 from *****************************

       __|  __|_  )
       _|  (     /   Amazon Linux 2 AMI
      ___|\___|___|

https://aws.amazon.com/amazon-linux-2/

EC2のOSがAmazon Linux2なら↑のような出力になります。

こういうAA的なロゴが出てくるOSやフレームワークって遊び心もあって良いなと個人的に思います😊

VSCode拡張機能をインストールする

f:id:tansantktk:20211122221458p:plain

「Remote - SSH」をローカルへインストールします。 VSCodeからSSH通信した状態であたかもローカルファイルの如く編集ができてしまう凄いextentionです。

VSCodeからSSH接続する

f:id:tansantktk:20211122221606p:plain

拡張機能を入れるとVSCode左端にRemote Explorerというメニューが追加されるはずですので、クリックしてみましょう。~/.ssh/configが参照されてHostの名前がリストに出てくるかと思います。

Remote Explorer上の歯車アイコンのボタンを押した後のメニューから~/.ssh/configVSCodeから開くことができますので、不都合があれば修正も可能です。

ではSSH接続を開始するために+マークの付いたフォルダアイコンをクリックしましょう。新しいウィンドウが開きVSCodeSSH接続を試みます。

VSCodeから接続先のCUIを操作する

接続に成功したらVSCodeのターミナルを開いてみます。すると接続先のCUIが表示されます。 あとは通常SSH接続した時と同じようにEC2を操作することが可能です。

VSCodeから接続先のファイルを表示、編集する

f:id:tansantktk:20211122221716p:plain

接続直後はVSCodeExplorerOpen Folderというボタンが表示されていますのでクリックし、開きたいディレクトリのパスを選択、または入力します。

f:id:tansantktk:20211122221850p:plain

すると少しロード時間を挟んだあとにExplorerにEC2上の各ファイルがツリー状に表示されます。

あとはローカルでVSCodeを使う時と同じようにファイルを開いたり編集するだけです!かなり便利!

ちょっとハマったこと

EC2上のファイルのパーミッションによってはSSH越しの編集しても保存時にエラーになる場合があります。(スーパーユーザーによって作成されたファイル等) そういった場合は必要に応じてchmodパーミッションの変更をする等といった対応が必要です。

ローカルとSSH接続先の拡張機能の扱いについて

ローカルでインストールしたVSCode拡張機能SSH接続先では基本的に適用されません。

SSH接続した状態でExtentionsのメニューを展開すると、LOCAL - INSTALLEDSSH: *********** - INSTALLEDという2種類の領域に分かれて拡張機能が表示されます。

f:id:tansantktk:20211122222623p:plain

SSH接続先で必要な拡張機能は別途SSH: *********** - INSTALLEDの領域に追加してインストールしましょう。手順はローカルと同じです。

使ってみて良かったこと

EC2インスタンスにそれなりのスペックのインスタンスタイプを設定しておけば、ホストマシンのスペックはそこまで求められない点が大きなメリットです。

また、Dockerの動作はmacOSと比べるとLinuxの方が断然実行速度が速いので、Dockerを多用するならオススメですね。