VSCode > Remote Containers > チュートリアル



![Kobito.A9WvuB.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/c51b3ab3-2790-6241-1458-8575009ba7d3.png "Kobito.A9WvuB.png")

PCに都度、設定・インストールしていた開発環境やCLIなどをVS Code内に閉じることができ、
開発者間で共有する際に便利になります。
開発者によってMac、Windowsなどマシンが違うがやることは同じといった場合にも有効に使えます。
また、プロジェクトによって開発環境のバージョンが違うことで、設定が煩雑になることからも解放されます。
例えばPHPのバージョンがあるプロジェクトだとPHP7だが、古いプロジェクトはPHP5とか。


本家の説明は以下

- [Developing inside a Container using Visual Studio Code Remote Development](https://code.visualstudio.com/docs/remote/containers#_getting-started)

- [microsoft/vscode-dev-containerss](https://github.com/Microsoft/vscode-dev-containers)




# Sample


[VSCode Remote Containers](https://github.com/Microsoft/vscode-dev-containers)ページのサンプルをやってみます


## Node Sample


以下のリポジトリからソースをローカル環境にクローンしてVS Codeで開きます。

[microsoft/vscode-remote-try-node: Node.js sample project](https://github.com/Microsoft/vscode-remote-try-node)


画面右下にReOpenするかと確認メッセージが出るのでReopen in Cantainerを選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/31a4c345-b2e0-81cd-5914-09e863a1d72d.png" height=300px />

コンテナが開始している旨が表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/d86b5d66-4702-6687-44a1-251ea8a880d7.png" height=300px />


### 1. Edit server.js

`server.js`を開いてみます。
`eslint` と `vcode-eslint` 拡張モジュールがすでにコンテナにインストールされています。


### 2. Terminalを開く

メニューから表示 > Terminalで開くか、`Ctrl+Shift+` でターミナルを開きます。

unameなどのLinuxコマンドを入力して、ターミナルで開いた環境がLinuxになっていることを確認します。

![スクリーンショット 2020-10-24 16.46.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/0d95a4b6-f9b7-3fae-3547-8d6d69413a5f.png "スクリーンショット 2020-10-24 16.46.29.png")


### 3. ビルド、実行、デバッグ

- server.jsを開く
- ブレークポイントを追加します（例：20行目）。
- F5を押して、コンテナ内のアプリを起動します。
- ブレイクポイントがヒットしたら、変数の上にカーソルを置いたり、ローカルを調べたりしてみてください。
- ブラウザを開いて http://localhost:3000 コンテナ内のサーバーに接続できました。

![スクリーンショット 2020-10-24 16.25.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/721bd3da-d2ee-392b-3cea-b904d9647746.png "スクリーンショット 2020-10-24 16.25.57.png")



### 4. 別のポートに変更

- デバッグを停止し、ブレークポイントを削除します。
- server.jsを開く
- サーバのポートを5000に変更します。`(const PORT = 5000;)`
- F5を押して、コンテナ内のアプリを起動します。
- F1を押して、Forward a Portコマンドを実行します。
- ポート5000を選択します。
- ブラウザを開いて http://localhost:5000 にアクセスします。新しいポートに接続できました。


![スクリーンショット 2020-10-24 16.24.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/9046205a-1cc9-7428-4f17-725642a7c359.png "スクリーンショット 2020-10-24 16.24.43.png")


## PHP

PHPもやってみます

[Click "Open Browser" in the notification that appears to access the web app on this new port. Look back at the terminal, and you should see the output from your site navigations Edit the text on line 21 in index.php and refresh the page to see the changes immediately take affect](https://github.com/microsoft/vscode-remote-try-php)


### 1. Restore Packages



### 2. 編集します。



### 2. Terminalを開く

メニューから表示 > Terminalで開くか、`Ctrl+Shift+` でターミナルを開きます。

### 3. ビルド、実行、デバッグ。

- index.phpを開く
- ブレークポイントを追加します（例：9行目）。
- F5を押して、コンテナ内のアプリを起動します。
- ブレイクポイントがヒットしたら、変数の上にカーソルを置いたり、ローカルを調べたりしてみてください。

![スクリーンショット 2020-10-24 17.32.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/80915197-a213-6b87-b463-3efe07b921c7.png "スクリーンショット 2020-10-24 17.32.56.png")


### 4. Running a server


- ターミナルから `php -S 0.0.0.0.0:8000` を実行します。
- F1 を押して、[Forward a Port] コマンドを実行します。
- 8000番ポートを選択します。
- ブラウザを開いて http://localhost:8000 にアクセスします。
- ターミナルを振り返ると、サイトのナビゲーションからの出力が表示されます。
- index.phpの21行目のテキストを編集してページを更新すると、変更がすぐに反映されます。


![スクリーンショット 2020-10-24 17.31.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/e7bf42d3-3fc1-f91c-cb99-48fb89877d65.png "スクリーンショット 2020-10-24 17.31.04.png")

![スクリーンショット 2020-10-24 17.36.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/cfda00f4-a498-bec7-66e2-c1cc617520ca.png "スクリーンショット 2020-10-24 17.36.46.png")





## .NET Core Sample

.Netもやってみます

[microsoft/vscode-remote-try-dotnetcore: .NET Core sample project for trying out the VS Code Remote - Containers extension](https://github.com/Microsoft/vscode-remote-try-dotnetcore)


### 1. Restore Packages

Restore Packagesを実行します。
C#拡張機能からパッケージをインストールするように通知されたら、Restoreをクリックしてコンテナ内から処理を起動します!

### 2. 編集します。

- Program.csを開く
- コードを追加してみて、言語機能をチェックしてみましょう。

特に何も確認することがなければスキッピしてOK


### 2. Terminalを開く

メニューから表示 > Terminalで開くか、`Ctrl+Shift+` でターミナルを開きます。

dotnet --versionなどのLinuxコマンドを入力します。

![スクリーンショット 2020-10-24 17.09.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/39b00403-7bc3-18b4-f306-735f9596c309.png "スクリーンショット 2020-10-24 17.09.11.png")


### 4. ビルド、実行、デバッグ。

Program.csを開く
- ブレークポイントを追加します（例：21行目）。
- F5を押して、コンテナ内のアプリを起動します。
- ブレイクポイントがヒットしたら、変数の上にカーソルを置いたり、ローカルを調べたりしてみてください。
- F5を押して、ローカルブラウザを開いて http://localhost:5000 に行き、コンテナ内のサーバーに接続できることに注意してください。

![スクリーンショット 2020-10-24 17.10.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/7223bbe5-9940-75bb-61bb-74a08817f821.png "スクリーンショット 2020-10-24 17.10.32.png")

![スクリーンショット 2020-10-24 17.11.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/7df3a802-41b0-693b-8c81-0e9c2ba2d272.png "スクリーンショット 2020-10-24 17.11.21.png")



### 5. 別のポートに変更

- デバッグを停止し、ブレークポイントを削除します。
- `appsettings.Development.json`を開きます。
- `"Url": "http://localhost:5000"` を `"Url": "http://localhost:9000"`に更新します。
- F5を押して、コンテナ内のアプリを起動します。
- F1を押して、[Forward a Port]コマンドを実行します。
- 9000番ポートを選択します。
- ブラウザを開いて http://localhost:9000 にアクセスします。新しいポートに接続できました。

![スクリーンショット 2020-10-24 17.14.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/9e027741-0706-e2b8-0572-b6bcf3d24f8b.png "スクリーンショット 2020-10-24 17.14.12.png")




# まとめ

開発を続けていくうちにローカル環境に様々な開発環境やバージョンが混在していき、古い開発環境が開けないといったこともままありますが、
このようにVS Codeに閉じておけば環境に左右される悩みから解放されそうです。