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

Amplifyの開発をするにあたって、ワークショップを試す、その時にリモートコンテナを使ってみる

Amplify のSNSワークショップ 内で開発環境の１つとしている、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 公式ドキュメントを参考にWSL2をインストールします
  • WSL 2 対応 Docker Desktop for Windowsを使うための手順
  • Windows 10 Home で WSL 2 + Docker を使う

始める

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 [email protected]:toricls/aws-amplify-sns-workshop-in-vscode.git
     

   • git clone した場合は、ファイル追加するとGitでの差分になるため ".git" ディレクトリは消して良いです

   • aws-amplify-sns-workshop-in-vscode のディレクトリは任意に変えた方がdocker コンテナ上はわかりやすい。例えば、vsremote-20210721に変更したと仮定

2. VSCodeを起動する

3. VSCodeの拡張機能を入れる

   • Remote - Containers プレビュー版
   • Remote - wsl(ms-vscode-remote.remote-wsl プレビュー版)
   • あった方が良い Docker (ms-azuretools.vscode-docker)

4. VSCodeから File -> Open Folder -> ディレクトリ C:\usr\aws-tutorial\amplify\vsremote-20210721 を選択すると、表示されたワーニングで
   「Yes ,I trust.. 」を選択し
   

5. Reopen in container を選ぶ
   「Reopen in Container」を選択
   

6. 自動でコンテナのビルドが行われます、SSD、CPU Corei7-10700 で（.wslconfigでmemory=6GB、processors=10を設定 ） 60秒程度で終わります
   コンテナのビルドが始まり
   
   ビルド中
   
   コンテナビルドおわり
   
   docker側からコンテナを見ると
   
   コンテナ内に拡張機能を入れると良い
   拡張機能を「Docker」検索し、install in dev Container 選択する
   

7. VSCodeのメニュー等からリモートコンテナに接続してIDEやターミナルとして使う、さまざまな使用例を後述しています

   • コンテナの中に接続するにはどうやるの？
   • コンテナの中でコマンド実行するには？
   • コンテナの中のファイルを編集するには？

他機能

• VSCodeの拡張機能でコンテナを開始する（startする）
  １つのコンテナを選択して、右クリック -> Start でコンテナ開始できる
  

• コンテナの中に入る（ssh接続相当をする）、コマンド実行する
  １つのコンテナを選択して、右クリック -> Attach Sehll でコンテナ内に接続する
  
  

• npx create-react-app amplify のコマンド実行例
  

• yarnでreactアプリケーションを開始
  
  

• コンテナ内のファイルをVSCodeで開く
  １つのコンテナを選択し、右クリック -> Attach Visual Studio Code でコンテナ内のファイルを開き、編集できる
  
  コンテナ内のディレクトリ /workspaces/amplify のファイルを見る場合
  

つづき　その２では以下を

• リモートコンテナをローカルファイルで使う場合
• リモートコンテナでの設定用のファイル