# 開発者向け情報 ## 1. 環境構築 以下のアプリケーション開発をおこなう環境へインストールします。 | アプリケーション名 | バージョン(指定がある場合のみ、記載する) | インストール条件 | | ------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | | [Node.js](https://nodejs.org/ja/) | 18.14.2 以上 | 必須 | | [Visual Studio Code](https://code.visualstudio.com/) | | [Visual Studio Code を利用する場合](#1-1-visual-studio-codeの拡張機能) | | [yarn](https://classic.yarnpkg.com/ja/) | | [本プログラムを yarn で実行する場合](#2-1-yarn-を使う場合) | | [docker compose](https://docs.docker.com/compose/install/) | | [本プログラムを docker compose で実行する場合](#2-2-docker-compose-を使う場合) | | [Vagrant](https://www.vagrantup.com/) | | [本プログラムを Vagrant で実行する場合](#2-3-vagrant-を使う場合) | | [Visual Studio Code](https://code.visualstudio.com/) + [Remote Containers](https://code.visualstudio.com/docs/remote/remote-overview) | | [Visual Studio Code + Remote Containers で開発する場合](#2-4-visual-studio-code--remote-containersで開発する場合) | | [Gitpod](https://www.gitpod.io/) | | [Gitpod で開発する場合](#2-5-gitpodで開発する場合) | ### 1-1. Visual Studio Code の拡張機能 Visual Studio Code を利用する場合は、以下の拡張機能をインストールします。 | 拡張機能 | インストール条件 | | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | | [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) | 任意 | | [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) | 任意 | | [TSLint](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin) | 任意 | | [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) | 任意 | | [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) | Visual Studio Code で Remote Development を利用する場合 | --- ## 2. 実行 コマンドの実行は、WorkingCopy のルートディレクトリでおこないます。 ### 2-1. `yarn` を使う場合 #### 2-1-1. 依存関係を構築する ```bash # install dependencies $ yarn install ``` #### 2-1-2. プログラムを実行する 以下のコマンドを実行した後、 http://localhost:3000 にアクセスすると、開発中のプログラムを確認する事ができます。 ##### 2-1-2-1. 通常 ```bash # serve with hot reload at localhost:3000 $ yarn dev ``` ##### 2-1-2-2. 軽量モード 開発用ローカルサーバが重い場合、以下のようにアクセシビリティチェック(vue-axe)を無効にして、起動できます。 ```bash # serve with hot reload at localhost:3000 $ yarn dev-no-axe ``` #### 2-1-3. トラブルシュート ##### 2-1-3-1. `Cannot find module ****` と怒られた時 再度、依存関係を構築し直し、プログラムを実行します。 ### 2-2. `docker compose` を使う場合 #### 2-2-1. 依存関係を構築し、プログラムを実行する 以下のコマンドを実行した後、 http://localhost:3000 にアクセスすると、開発中のプログラムを確認する事ができます。 ```bash # serve with hot reload at localhost:3000 $ docker compose up --build ``` #### 2-2-2. トラブルシュート ##### 2-2-2-1. `Cannot find module ****` と怒られた時 プログラムを止め、以下のコマンドを実行します。 ```bash # serve with hot reload at localhost:3000 $ docker compose run --rm app yarn install ``` ### 2-3. `Vagrant` を使う場合 #### 2-3-1. 依存関係を構築し、プログラムを実行する 以下のコマンドを実行した後、 http://localhost:3000 にアクセスすると、開発中のプログラムを確認する事ができます。 ```bash # serve with hot reload at localhost:3000 $ vagrant up ``` ### 2-4. Visual Studio Code + Remote Containers で開発する場合 #### 2-4-1. 依存関係を構築し、プログラムを実行する [Quick start: Try a dev container の画像 (外部サイト)](https://code.visualstudio.com/docs/remote/containers#_quick-start-try-a-dev-container)のように、左下部の「Open Folder in Container」でこのリポジトリのルートを選択すれば、環境構築が始まります。 環境を構築した後に http://localhost:3000 にアクセスすると、開発中のプログラムを確認する事ができます。 #### 2-4-2. Topic - 設定を変更したい場合は、[devcontainer.json reference (外部サイト)](https://code.visualstudio.com/docs/remote/containers#_devcontainerjson-reference)を参照し、`.devcontainer/devcontainer.json`を変更してください。 - Remote Container 実行時のみ有効な拡張機能「ESLint」を導入していますが、必要に応じて`.devcontainer/devcontainer.json`の`extensions`に追加してください。 詳細な手順は、[Managing extensions (外部サイト)](https://code.visualstudio.com/docs/remote/containers#_managing-extensions)を参照してください。 - 開発環境を再構築する場合は、左下部の「Rebuild Container」を実行してください。 ### 2-5. Gitpod で開発する場合 以下のボタンを押し、GitHub アカウント認証をすると、自動的にリモート開発環境のセットアップが行われます。 [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/tokyo-metropolitan-gov/covid19) 無償ユーザーは月 50 時間まで利用できます。 --- ## 3. 本番環境/その他の判定 `process.env.GENERATE_ENV` の値が、本番の場合は`'production'`に、それ以外の場合は `'development'` になっています。 テスト環境のみで実行したい処理がある場合は、こちらの値をご利用ください。 --- ## 4. ステージング・本番環境への反映 下表の左列に記載されたブランチが更新されると、ブランチと Web サイトの更新が自動的におこなわれます。 | ブランチ | 更新される Web サイト | | ------------- | ------------------------------------------------------------ | | `master` | 本番サイト https://stopcovid19.metro.tokyo.lg.jp/ | | `staging` | ステージングサイト https://stopcovid19-tokyo-staging.web.app | | `development` | 開発用サイト https://stopcovid19-tokyo-development.web.app/ | ※ (2022-05-23 更新) ホスティングサービスを Netlify から Firebase に変更するのにともなって、Generate された HTML 類がコミットされるブランチ (production, gh-pages, dev-pages) の運用は終了しました。 --- ## 5. ブランチルール development 以外は、Pull Request は禁止です。 Pull Request を送る際のブランチは、以下のネーミングルールに従ったブランチにしてください。 | 種類 | ブランチのネーミングルール | | ------------------ | ------------------------------------------ | | 機能追加系 | `feature/#{ISSUE_ID}-#{branch_title_name}` | | ホットフィックス系 | `hotfix/#{ISSUE_ID}-#{branch_title_name}` | ### 5-1. 基本的なブランチ | 目的 | ブランチ | 確認 URL | Pull requests を出せる人 | 備考 | | ------------ | ----------- | ---------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------- | | 開発 | development | https://stopcovid19-tokyo-development.web.app/ | 全開発者 | base branch。基本は、この`development`ブランチに Pull Request を送ってください。 | | ステージング | staging | https://stopcovid19-tokyo-staging.web.app | 管理者のみ | 本番前の最終確認用。管理者以外の Pull Request は禁止です。 | | 本番 | master | https://stopcovid19.metro.tokyo.lg.jp/ | 管理者のみ | 管理者以外の Pull Request は禁止です。 | ### 5-2. システムで利用しているブランチ | 目的 | ブランチ | 確認 URL | 備考 | | ---------- | -------------- | -------- | ------------ | | OGP 作業用 | deploy/new_ogp | なし | OGP の更新用 | --- ## 6. `data` ディレクトリ以下の JSON データについて ### 6-1. データの構造が変わったとき、またはデータが追加されたときは 次のコマンドで、自動生成しているコード（`libraries/auto_generated` 以下のファイル）を再生成してください。 ```bash $ yarn generate-data-converters ``` また、このとき自動生成された interface の定義が変更されます。必要に応じて各コンポーネントの実装を修正してください。 JSON の構造に変化がなくデータだけ更新された場合は、コマンドを実行する必要はありません。 --- ## 7. 依存性の管理 このプロジェクトでは、[Renovate](https://github.com/renovatebot/renovate)によって依存性の更新を管理しています。 適用されるルールについては、[renovate.json](./.github/renovate.json)を参照してください。 ### 7-1. Node.js のバージョンアップ このプロジェクトでは、Node.js を Renovate の管理対象から除外しています。 Node.js のバージョンを更新したい場合、次の手順に従ってください。 1. このプロジェクトの現在の Node.js バージョンを確認 2. 現在の Node.js バージョンを示す文字列（例：14.16.x）をすべて新しいバージョン（例：14.16.y）に置換 3. 指定した Node のバージョンを手元の環境にもセットアップしてから yarn.lock を再生成しコミットする Visual Studio Code などのエディタの検索機能で一括置換するのが簡単でしょう。