Help us understand the problem. What is going on with this article?

さすがだぞ!VS Code をリモートホストで動かす方法をばっちり理解しているんだな!

この記事は KAYAC Advent Calendar 2019 の10日目です!

VSCode には Remote Development という、SSH でつないだホストや、Docker コンテナ上の環境を、あたかもローカルの環境下のように扱うことのできる公式の Extension があります。最近は、ずっとこれをつかって、Docker 上で作業をしていたのですが、Mac や Windows だと Docker 遅いし、いっそリモートホスト上に VSCode の作業場所を作っておけばいいのでは?と思い至り、この記事を書くことにしました。

リモートホスト上で VSCode を動かすメリット

  • 貧弱なクライアントや、Windows 環境でも快適にビルドなどができる
  • npm モジュールのダウンロードとかが概ね早い
  • VSCode がインストールされていて、SSH さえつながれば、すぐに開発環境を整えることができる

リモートホスト上で VSCode を動かすデメリット

  • 金がかかる

用語集

用語 概要
VSCode Visual Studio Code というエディタ。イケてる
AWS Amazon Web Services というクラウドのサービス。イケてる
AWS EC2 AWS の VPS サービス。イケてる

環境を作る

1. EC2 のインスタンスを作る

ちょっと、インスタンスの作る手順をことこまかに解説しようと思ったのですが、お金かかるし責任取れないので、割愛します!ポイントを箇条書します。

  • この記事では Amazon Linux 2 AMI で解説します
  • インスタンスタイプは、t3a.medium ぐらいあれば快適に動く(主観)印象です
  • セキュリティグループは SSH(ポート22) だけ開けてください

2. SSH config を書く

SSH config を書いてください。下記は一例です。

Host vscode
  HostName xxxxxxxxxxxxx.amazonaws.com
  User ec2-user
  IdentityFile ~/.ssh/vscode.pem
  LocalForward 3000 127.0.0.1:3000

後述しますが、リモートホスト側で localhost:3000 に開発サーバを立てるので、ローカルフォワードをしておきます。

3. VS Code で Remote Development の Extension をインストールする

ポチポチしたらインストールできるので、入れてください

4. VS Code から SSH で接続する

左下にある「><」みたいなアイコンをクリックし、出てきたメニューから、「Remote-SSH: Connect to Host」 を選択します。

選択すると、さきほど SSH Config に書いたホストが出てくるので、それを選択します。

新しいウィンドウが立ち上がり、接続が完了すれば、環境づくりは OK です。

create-react-app を使ってみる

create-react-app でアプリを作ってみましょう。

1. node をインストールする

好みの方法でいいのですが、node をインストールしてください。
僕は nvm で入れました。

2. create-react-app を実行する

ホームディレクトリなどで、 npx create-react-app app-name を実行し、React のアプリを作成します。通信はインスタンス上で行われるので、テザリングとかでも安心してできるのがいいところ。

3. React の開発環境を立ち上げる

先ほど、作成したアプリのディレクトリに移動し、npm start で開発サーバを立ち上げます。開発サーバはホストの localhost:3000 に立ち上がりますが、ローカルフォワードを設定しておけば、クライアント側の localhost:3000 で確認することができます。HMR もちゃんと動きます!

スクリーンショット 2019-12-10 23.16.17.png

やった!これで特に不自由なくフロントエンド開発はできると思います。

おわりに

退職してるのに勝手にカレンダーに登録して書きました。日付が変わってないので、ギリギリセーフだと思います。飛ぶ鳥跡を濁さず。えらい。カヤックはいい会社です。

次回は ken39arg さんの「フルマラソンでサブスリーする方法を書く」です!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away