Zenn
🔥

Amplify リモート開発の環境構築 (Vue.js)

2022/03/07に公開
Docker
VS Code
Vue.js
Windows
Amplify
tech

2022/11に更新した記事がこちらです。

要約

  • Visual Studio Code(VSCode) と Docker で再現性のあるクリーンな開発環境をつくる
  • プロジェクトごと開発環境を保持できる
  • 手軽に再構築と共有ができる

はじめに

Amplifyを使うことになり、一通りチュートリアルを行いました。
Next Stepとして、何か作ってみようとしたところ、鬼のようにアップデートのあるライブラリと、たくさんのAmplifyという言葉に惑わされました。
他にもmockが不安定な動きをしたり、amplify pushが失敗したりと七転八倒を繰り返し、開発環境自体を再構築をするようになりました。
Vueの開発についてもメージャーバージョンの違いにより、環境側(nodejsとvue/cli）の設定の共有が必要です。

環境例

ファイル構成

amplify-vuejs-docker
├── .devcontainer/
│   ├── devcontainer.json
│   ├── docker-compose.yml
│   └── web/
│  	  └── Dockerfile
└── server/
  1. docker-compose.yml
docker-compose.yml
version: '3.8'

services:
  amplify:
    image: amplify-vuejs/app:1.0
    container_name: amplify-vuejs
    build: ./web
    ports:
      # yarn serve
      - 8080:8080
      # mock api
      - 20002:20002 
    stdin_open: true
    working_dir: '/app'
    volumes:
      - ../server:/app
      # credential,configを保管したい人向け
      - ../dev/aws/:/root/.aws/
    tty: true
  1. Dockerfile
    Amplify Mocking(ローカルモック)を使うためにjavaを入れます。
    Amazon Correttoを使ってみます。
    大事なことはバージョン指定をすることです。
Dockerfile
FROM node:16.14.0
# java for Amplify Mock
RUN apt update; apt install -y wget software-properties-common apt-transport-https
RUN wget -O- https://apt.corretto.aws/corretto.key | apt-key add - 
RUN add-apt-repository 'deb https://apt.corretto.aws stable main'
RUN apt update; apt-get install -y java-18-amazon-corretto-jdk
# git-flow
RUN apt install git-flow
# amplify
RUN npm install -g npm@8.5.1
RUN npm install -g @aws-amplify/cli@7.6.22
# vue
RUN npm install -g @vue/cli@5.0.1
  1. devcontainer.json
    Vueは3.xを使う場合volarを使うことになります。(misterj.vue-volar-extention-pack)
    フォーマッターとしてのvolarは少し弱いところがあるようです。
    あとは個人的な好みです。
devcontainer.json
{
  "name": "Amplify Vue3",
  "dockerComposeFile": "docker-compose.yml",
  "service": "amplify",
  "workspaceFolder": "/app",
  "extensions": [
    "misterj.vue-volar-extention-pack",
    "aws-amplify.aws-amplify-vscode",
    "GraphQL.vscode-graphql",
    "oderwat.indent-rainbow",
    "eamodio.gitlens"
  ],
  "settings": {
    "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
      "editor.defaultFormatter": "johnsoncodehk.volar"
    },
    "[json]": {
      "editor.defaultFormatter": "vscode.json-language-features"
    },
    "eslint.workingDirectories": [{ "mode": "auto" }]
  }
}

使い方

  1. Dockerをインストールします

  2. VSCodeをインストールします

  3. VSCodeに拡張機能Remote Developmentをインストールします

  4. リポジトリをクローンします

git clone https://github.com/covasue/amplify-vuejs-docker
  1. クローンしたamplify-vuejs-dockerに移動します
cd amplify-vuejs-docker
  1. VSCodeを起動して Reopen in container をクリックします
code .

初回はコンテナの構築があるので4～5分かかりますが、2回目以降は4～5秒でコンテナ（開発環境）が立ち上がります。
VSCodeを閉じるとコンテナが自動終了します。

Windowsの場合はWSL2から実行する

爆速で開発できるはずがリモート開発を実装するとやたら遅いのと
webpack5(vue/cli@5)でホットリロードしない現象が起きてしまいました。
調べたところFileSystemを混ぜちゃダメとのことでした。
こちらのサイトに丁寧に書かれています。
https://levelup.gitconnected.com/docker-desktop-on-wsl2-the-problem-with-mixing-file-systems-a8b5dcd79b22
yarn serve や buildが　なんならDocker使う前より早いんじゃないかと思えるようになりました。

上記環境でよいところ

  • Amplify CLIとVue CLIとMockの必須条件のJDKをそれぞれバージョン指定した状態でインストールした状態になる。
  • 構築作業を終えると、VSCodeのワークスペースを開くだけで、Docker操作を特に意識することなくコンテナに入り、ローカル環境のようにVSCodeからターミナルをたたくことができる
  • git clone ,git checkout xxx, amplify init ,npm install　概ね4ステップで環境再現
  • VSCodeの設定を共有できる。例えばセミコロン、クォーテーションなどの設定を保持できる

Amplify でハマったところ

  • AmplifyあるいはAWS Amplifyから始まる言葉多すぎ。あと意味変わりすぎ。
  • 破壊的変更が多くビビる。
  • 公式の半年前のチュートリアルが動かないことがある。(ライブラリのバージョン指定がないサンプルは動かないと考える。バージョン指定がある場合は必ず合わせる)

適宜追加予定

たくさんのAmplifyから始まる言葉について

Amplify Framework

  • Amplifyの仕組み全体を示します。
  • 当初はフロントエンドのライブラリのことを意味していました。
    そのためLibrriesとUIのことを意味していることもあります←罠です。

Amplify CLI

  • バックエンド構築をCLIで行う(amplify add *** 等）
  • 公式ドキュメントが見やすい。だが破壊的変更があることについての誘導が分かりにくい（最近一部できつつある）
  • Amplify CLIのAPI(GraphQL)≒AppSyncのAmplify CLI版

Amplify Console

  • WebのConsole画面のこと
  • Hostingことを意味している場合もある←辞めてくれ

Amplify Librries

  • javascript/iOS/Android/Flutter別のライブラリを通してAWSのリソースを使う仕組み
  • フロントエンド側からAmplify CLIを使っていない既存のバックエンドリソースを使うことができる

Amplify UI Components

  • https://ui.docs.amplify.aws/
  • Framework別(開発におけるアプリケーションの枠組み)のコンポーネント
    主にReactのものが多い

Amplify Hosting

  • 単純なホスティングあるいはリポジトリに接続してCI/CDを行う仕組み
  • たまに単純なホスティングのことをAmplifyと略していることがある

Amplify Studio(旧Admin UI)

  • ノンプログラミングとかローコードとかノーコードとかいろいろ言われていますがそれだけではない
  • FigmaからReactコンポーネント作れます
  • AWSのアカウントを持っていなくてもAmplifyで作ったバックエンドの設定をGUIでできます←とても便利

Amplify Mocking

  • ローカル環境でバックエンド環境を試すことができます
  • 爆速で開発できるという売りですが構築に4~5分かかることがしばしばあるため、トライアンドエラーで試すのはMockを使うのが良いと思います
  • Javaの環境が必要です

上記環境の既知の問題点

  • amplify mock apiを実行してAmplify Librriesを利用するとaws-exports.jsのaws_appsync_graphqlEndpointを書き換える必要がある。
  • Vue CLIはメンテナンスモードのためVite等を使うようになる。

次回以降の予定

  • 今回の環境を使って公式のTutorialをやってみる　← 書きました。
    https://zenn.dev/sueyoshi/articles/1ddeba3352fcd9
  • リポジトリを共有して共同開発する際のハマりどころ
  • Amplify SNS WorkshopのVue版としてやる

Discussion