Amplifyの開発をVSCode Remote containerで行う（その１）

## Amplifyの開発をするにあたって、ワークショップを試す、その時にリモートコンテナを使ってみる
[Amplify のSNSワークショップ](https://amplify-sns.workshop.aws/ja/) 内で開発環境の１つとしている、VSCode Remote container を試してみます

- Windows10 での進め方です、Macの場合はDocker for Macをインストール、VSCodeインストールしていれば似たような手順でいけます 
- ワークショップの説明( https://amplify-sns.workshop.aws/ja/00_prerequisites/20_install_and_configs.html ) の、以下の箇所について、具体的にどうやるかを、このページでは記載しています
   
```
Visual Studio CodeとDockerに馴染みがある場合、ローカル環境を使用する代わりにaws-amplify-sns-workshop-in-vscodeを使うことができます。
```

## リモートコンテナ使用例
### 前提
- VSCodeがインストールされていること
- Windowsであれば、WSL2が使えること
- Docker Desktop for Windows 3.3 がWSL2で動くこと

### WSL2,Dockerについては以下を参考にする
- 注意点は、WSL2を先に入れ、次にDockerを入れる。Dockerでは、Install の途中で表示される ”Configuration は Enable WSL 2 Windows Features” のチェックをON（チェックつけたまま）
- 参考
    - https://tech-lab.sios.jp/archives/21675 にある、「Docker Desktop for Windowsのインストール」やMicrosoft [公式ドキュメント](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10)を参考にWSL2をインストールします
    - [WSL 2 対応 Docker Desktop for Windowsを使うための手順](https://qiita.com/zembutsu/items/22a5cae1d13df0d04e7b)
    - [Windows 10 Home で WSL 2 + Docker を使う](https://qiita.com/KoKeCross/items/a6365af2594a102a817b)

### 始める
1. Git clone またはリポジトリをzipダウンロードする
    - toriさんのリポジトリ https://github.com/toricls/aws-amplify-sns-workshop-in-vscode を使います.
    - zipダウンロードが手軽です
    - Github のリポジトリのページ -> Code -> Download zip でダウンロードして 展開する
    - Git clone 一例  

        ```
        cd c:\usr\aws-tutorial\amplify  
        git clone git@github.com:toricls/aws-amplify-sns-workshop-in-vscode.git
        ```
    - git clone した場合は、ファイル追加するとGitでの差分になるため ".git" ディレクトリは消して良いです
    - `aws-amplify-sns-workshop-in-vscode` のディレクトリは任意に変えた方がdocker コンテナ上はわかりやすい。例えば、`vsremote-20210721`に変更したと仮定
1. VSCodeを起動する
1. VSCodeの拡張機能を入れる
    -  [`Remote - Containers` プレビュー版](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) 
    - `Remote - wsl`(ms-vscode-remote.remote-wsl プレビュー版)
    - あった方が良い `Docker` (ms-azuretools.vscode-docker)
1. VSCodeから File -> Open Folder  -> ディレクトリ `C:\usr\aws-tutorial\amplify\vsremote-20210721` を選択すると、表示されたワーニングで
「Yes ,I trust.. 」を選択し
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/1653f328-874e-2fcb-6c38-c4140905d49e.png)

1.  `Reopen in container` を選ぶ
「Reopen in Container」を選択
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/dbf39f9e-b535-c181-2621-90a946dbed57.png)

1.  自動でコンテナのビルドが行われます、SSD、CPU Corei7-10700 で（.wslconfigでmemory=6GB、processors=10を設定 ） 60秒程度で終わります
コンテナのビルドが始まり
![03_starting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/3cbfe6d4-090e-2322-36d0-961d2743c10e.png)
ビルド中
<img width="60%" alt="04-building" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/22f16843-c7d3-3e80-19da-492be2b2b2c0.png">
コンテナビルドおわり
<img width="60%" alt="05-building-end" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/68f8f038-9d2e-5031-d99f-1feede8212e5.png">
docker側からコンテナを見ると
<img width="60%" alt="06" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/a300ea95-a3a7-cb60-66b9-3efd87920192.png">
コンテナ内に拡張機能を入れると良い
拡張機能を「Docker」検索し、`install in dev Container` 選択する
![07_拡張機能_install^in-dev-container.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/05d26717-9f5c-5715-afdf-3e78166d83b2.png)

1.  VSCodeのメニュー等からリモートコンテナに接続してIDEやターミナルとして使う、さまざまな使用例を後述しています
    - コンテナの中に接続するにはどうやるの？
    - コンテナの中でコマンド実行するには？
    - コンテナの中のファイルを編集するには？
    

### 他機能
- VSCodeの拡張機能でコンテナを開始する（startする）
１つのコンテナを選択して、右クリック -> Start でコンテナ開始できる
![08_拡張機能でdockerのコンテナ一覧の起動（start）など.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/e478e618-9403-1f89-e7d1-3c053d26e347.png)

- コンテナの中に入る（ssh接続相当をする）、コマンド実行する
１つのコンテナを選択して、右クリック -> Attach Sehll でコンテナ内に接続する
![09_コンテナの中に入るssh接続相当.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/26f55a11-684a-3547-1cfb-f347a5d252e1.png)
![09_2_コンテナの中に入るssh接続相当.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/908d9e3d-8e81-6a31-f403-a4738d92f026.png)

- `npx create-react-app amplify` のコマンド実行例
![10_create.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/c015c455-5704-176a-83fb-a507b8eb4fdb.png)
- yarnでreactアプリケーションを開始
![11_yarn-start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/05d6b6f3-5e8c-e8f9-4a07-e85487c484a5.png)
![12_yarn-start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/3e77b778-ec24-471a-cd94-0141613ff10d.png)

- コンテナ内のファイルをVSCodeで開く
１つのコンテナを選択し、右クリック -> `Attach Visual Studio Code` でコンテナ内のファイルを開き、編集できる
![12_コンテナ内のファイルをVSCodeで開く.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/75240f2e-16ea-bdd0-09e7-9e82e9c82e41.png)
コンテナ内のディレクトリ `/workspaces/amplify` のファイルを見る場合
![13_コンテナ内のファイルをVSCodeで開く.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/ca25955e-5922-671e-e8db-c3c09f9fa782.png)

## つづき　その２では以下を
- リモートコンテナをローカルファイルで使う場合
- リモートコンテナでの設定用のファイル