paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

VSCodeとPaizaCloudで超簡単に高機能な開発環境を構築する

もじゃ(@s10akir)です。情報系の専門学校に通いながら、paizaラーニングでプログラミング学習動画制作のアルバイトをしています。

先日、MicrosoftからVisual Studio Code(以下VSCode)向けの「Remote Development」という拡張機能がリリースされましたね!

「Windows Subsystem Linux」「Dockerのコンテナ」「Linuxサーバ」にVSCodeから接続し、その中の実行環境を使って開発ができちゃう(!) というトンデモ拡張機能です!大変な環境設定などをしなくても、VSCodeの強力な支援機能を生かしたまま、手元で開発ができますな。

環境設定ってOSや言語、フレームワークによっては非常に大変で、初心者の方だと挫折してしまうことも多いですよね。また「ちょっと試してみたいけど、極力手元の環境はクリーンに保っておきたいのだが…」という私のようなオタクの方もいると思います。

その気になればDockerに開発環境を閉じ込めたり、サーバにsshで接続してvimでちまちま開発したり…といったこともできなくはないですが、やっぱり高機能なエディタの持つ支援機能が恋しくなっちゃいます。

というわけで今回は、PaizaCloudとVSCodeを使って、簡単に高機能な開発環境を構築してみたいと思います。

PaizaCloudとVSCodeで環境構築やってみた

PaizaCloud」では、各種プログラミング言語やフレームワークなどが使えるLinux開発環境をブラウザ上で簡単に用意できるクラウドIDEです。ssh越しに作成した開発環境に接続することも可能です。

この「簡単に構築できるLinux環境」と「VSCodeの強力な支援機能」が合わされば…簡単に強い環境が作れてヤバヤバのヤバな気がするぜ!

というわけで、ここからは実際にPaizaCloudとVSCodeで開発環境を構築していきます。

1. PaizaCloudのコンテナを作成する

PaizaCloudの利用には会員登録が必要です。無料プランでも試せます。(※無料プランの場合「24時間で環境が削除される」「ページを閉じると環境が一時停止する(最大連続4時間)」という点に留意してください。無料プランではVSCodeから接続している間も、ブラウザを閉じてはいけません。)

f:id:paiza:20190520134006p:plain

必要な環境を選び、新規サーバ作成をクリックしましょう。今回は例として、Node.jsの実行環境を選択しました。

ちなみに、ベーシックプランだと「常時起動」にチェックを入れておけばいつでもVSCodeから接続できるのでとっても便利です!

すでにsshの公開鍵を持っている方は、このとき「SSH利用」にチェックを入れて公開鍵を登録しておくと、これ以降に出てくる 3. の手順もスキップできます。

2. sshのキーペアを作成する

PaizaCloudにsshで接続する際は、公開鍵暗号化方式という認証方式を用います。秘密鍵と公開鍵のペアを作る必要があるので、事前に作成しておきましょう。(※すでに自分の鍵を持っている方はこのステップは飛ばしていただいて大丈夫です)

f:id:paiza:20190520140710p:plain

公開鍵暗号化方式について詳しくはこちら
qiita.com

PaizaCloud上でターミナルを起動し、次のコマンドでキーペアを作成します。

$ ssh-keygen -f ~/id_rsa

この際、パスフレーズを設定するように言われるかと思います。なしの場合はそのままEnter2回でも大丈夫なのですが、念のため設定しておくことをおすすめします。

Enter passphrase (empty for no passphrase):
Enter same passphrase again:

これで /home/ubuntu に秘密鍵と公開鍵のペアが作成されました!

ファイル名 鍵の種類
id_rsa 秘密鍵
id_rsa.pub 公開鍵

公開鍵は名前の通り公開するものですので、そこまで厳重に管理しなくても問題ありません。一方、秘密鍵はその名の通り「秘密にしておくもの」です。このファイルをうっかり公開してしまうと、第三者に不正なアクセスを許してしまう可能性がありますから、厳重に管理しましょう。

f:id:paiza:20190520142141p:plain

これらの鍵はあとでまた使いますので、右クリックしてダウンロードしておきましょう。ちなみに、同じ鍵をGithubなどのほかのサービスで使うこともできます。

3. PaizaCloudにsshで接続できるようにする

さきほど作成した「公開鍵」の方のファイルを開き、中身をコピーしておきましょう。

f:id:paiza:20190520142221p:plain

f:id:paiza:20190520142233p:plain

左上のメニューから「SSH設定」を選択し、開いたダイアログの下のフォームへ貼り付け、SaveボタンをクリックすればOKです。

上の行に出ているコマンドは、あとで必要になります。どこかへメモしておいてもよいですし、もう一度この画面を開けば確認できます。

4. Visual Studio Code Insidersをインストールし、拡張機能を追加する

code.visualstudio.com

「Remote Development」は、まだプレビュー版の機能なため正式公開されていませんが、テスト版の位置付けであるVSCode Insidersは利用できます。

Insiders版は独立した環境ですから、すでにVSCodeを利用中でも、そちらに影響が出ることはありません。安心!

f:id:paiza:20190520142604p:plain

VSCode Insidersを起動したら、左側拡張機能のメニューから「Remote Development」で検索し、該当の拡張機能をインストールしましょう。

このように、インストール後に新しいアイコンが表示されていればOKです!

f:id:paiza:20190520142640p:plain

5. SSHの設定を行う

ここで、3. でメモっておいたコマンドが必要になります!

ssh -p 数字 ubuntu@設定したコンテナ名.paiza-user.cloud

上記コマンドには、下記のような意味があります。これらの情報を用いて、PaizaCloudへ接続します。

項目 対応する部分
ホスト名 @より後ろ 設定したコンテナ名.paiza-user.cloud
ユーザー名 @より前 ubuntu
ポート番号 -pの次の数字 59123など、環境によって変わります

この情報をsshの設定ファイルへ追記しましょう。

f:id:paiza:20190520142911p:plain

f:id:paiza:20190520142929p:plain

VSCodeでF1キーを押し、開いたコマンドパレットから「>Remote-SSH: Open configuration File」を実行しましょう。

表示された選択肢の中から設定ファイルを選択しますが、何を選択するかはOSによってファイル名や場所が異なります。

OS 選択するもの
Windows C:\Users\ユーザ名\.ssh\config
Mac /Users/ユーザ名/.ssh/config
Linux /home/ユーザ名/.ssh/config

ちなみに、秘密鍵id_rsaの保存先はこの.sshフォルダと同じ場所にしておくと何かと便利です。

これらのファイルを開いたら、下記の内容を追記しましょう。

Host 接続先の名前(好きな名前)
    HostName ホスト名
    User ユーザー名
    Port ポート番号
    IdentityFile 秘密鍵の保存先  # 例 ~/.ssh/id_rsa

f:id:paiza:20190520143118p:plain

このファイルを保存し、再びF1でコマンドパレットを呼び出して「Remote-SSH: >Remote-SSH: Connect to Host」を実行しましょう。登録した接続先が選択肢にあればOKです!

6. 実際に接続してみる

実際に接続先を選択してみましょう。もう一つ新しいVSCodeのウィンドウが立ち上がり、しばらくしてから左下の緑の部分に接続先名が出ていれば成功です!

ターミナル

それでは、実際に使ってみましょう。

「Ctrl + `」でターミナルを立ち上げ、次のコマンドを打ち込みます。

$ uname -a

f:id:paiza:20190520143237p:plain

PaizaCloudで作成したコンテナ名と、「Ubuntu」とありますね。

ほかのコマンドも試してみましょう。今回は環境作成時にNode.jsの実行環境を選択しているので、ちゃんと入っているか確認してみます。(ちなみに今使っている私のマシンには、Node.jsをインストールしていません)

$ node -v

f:id:paiza:20190520143343p:plain

Node.jsのバージョンが表示されました!このターミナルはまぎれもなくPaizaCloudのコンテナのターミナルですね!

ファイル編集

ファイルも見てみましょうか。

左側のファイルツリーから「Open Folder」をクリックし、デフォルトでホームディレクトリ /home/ubuntu が選択されているのでそのままOKを押してみましょう。

PaizaCloudのほうにあるファイル一覧が表示されました!このまま編集もできちゃいます!!すごい!!

なんだかやけにファイルが多いように見えますが、これは普段表示されていない隠しファイルが表示されているからです。(※PaizaCloudでもファイルツリーの設定から表示できます)

f:id:paiza:20190520143525p:plain

試しに書いてみたコードもちゃんとハイライトされて、支援も機能しています。実行も問題ありません。

VSCodeのほかの拡張機能もいつもどおりインストールでき、設定はサーバ側の .vscode-remote というフォルダに保存されるようです。

というわけで、PaizaCloudとVisual Studio Codeで開発環境構築ができました!やったね!もう手元のマシンで開発環境を構築する時代は終わったのでは…?

まとめ

今回の方法では、一度VSCode側の設定さえ整えてしまえば、難しいことを考えずサクッと快適な開発環境が構築できます。

私は、PaizaCloudの強みは「ぽちぽちしていくだけで簡単に開発環境が整えられる」ところだと思っています。今回はその上で、普段使い慣れた高機能エディタも使えるようにできましたので…ヤバヤバのヤバですね…。

PaizaCloudのベーシックプランを使えば、開発したWebサービスをそのまま公開することもできちゃいます。

開発環境構築にハードルの高さを感じている初心者の方はもちろん、エディタにこだわりのカスタマイズがある上級者の方も、ぜひこの機会にRemote Development for VSCodeでPaizaCloudを試してみてください。


PaizaCloud」は、環境構築に悩まされることなく、ブラウザだけで簡単にウェブサービスやサーバアプリケーションの開発や公開ができます。
https://paiza.cloud





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud