以下のアプリケーション開発をおこなう環境へインストールします。
| アプリケーション名 | バージョン(指定がある場合のみ、記載する) | インストール条件 |
|---|---|---|
| Node.js | 16.13.0 以上 | 必須 |
| Visual Studio Code | Visual Studio Code を利用する場合 | |
| yarn | 本プログラムを yarn で実行する場合 | |
| docker compose | 本プログラムを docker compose で実行する場合 | |
| Vagrant | 本プログラムを Vagrant で実行する場合 | |
| Visual Studio Code + Remote Containers | Visual Studio Code + Remote Containers で開発する場合 | |
| Gitpod | Gitpod で開発する場合 |
Visual Studio Code を利用する場合は、以下の拡張機能をインストールします。
| 拡張機能 | インストール条件 |
|---|---|
| ESLint | 任意 |
| Vetur | 任意 |
| TSLint | 任意 |
| Debugger for Chrome | 任意 |
| Remote Development | Visual Studio Code で Remote Development を利用する場合 |
コマンドの実行は、WorkingCopy のルートディレクトリでおこないます。
# install dependencies
$ yarn install以下のコマンドを実行した後、 http://localhost:3000 にアクセスすると、開発中のプログラムを確認する事ができます。
# serve with hot reload at localhost:3000
$ yarn dev開発用ローカルサーバが重い場合、以下のようにアクセシビリティチェック(vue-axe)を無効にして、起動できます。
# serve with hot reload at localhost:3000
$ yarn dev-no-axe再度、依存関係を構築し直し、プログラムを実行します。
以下のコマンドを実行した後、 http://localhost:3000 にアクセスすると、開発中のプログラムを確認する事ができます。
# serve with hot reload at localhost:3000
$ docker compose up --buildプログラムを止め、以下のコマンドを実行します。
# serve with hot reload at localhost:3000
$ docker compose run --rm app yarn install以下のコマンドを実行した後、 http://localhost:3000 にアクセスすると、開発中のプログラムを確認する事ができます。
# serve with hot reload at localhost:3000
$ vagrant upQuick start: Try a dev container の画像 (外部サイト)のように、左下部の「Open Folder in Container」でこのリポジトリのルートを選択すれば、環境構築が始まります。
環境を構築した後に http://localhost:3000 にアクセスすると、開発中のプログラムを確認する事ができます。
- 設定を変更したい場合は、devcontainer.json reference (外部サイト)を参照し、
.devcontainer/devcontainer.jsonを変更してください。 - Remote Container 実行時のみ有効な拡張機能「ESLint」を導入していますが、必要に応じて
.devcontainer/devcontainer.jsonのextensionsに追加してください。 詳細な手順は、Managing extensions (外部サイト)を参照してください。 - 開発環境を再構築する場合は、左下部の「Rebuild Container」を実行してください。
以下のボタンを押し、GitHub アカウント認証をすると、自動的にリモート開発環境のセットアップが行われます。
無償ユーザーは月 50 時間まで利用できます。
process.env.GENERATE_ENV の値が、本番の場合は'production'に、それ以外の場合は 'development' になっています。
テスト環境のみで実行したい処理がある場合は、こちらの値をご利用ください。
下表の左列に記載されたブランチが更新されると、ブランチと 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) の運用は終了しました。
development 以外は、Pull Request は禁止です。 Pull Request を送る際のブランチは、以下のネーミングルールに従ったブランチにしてください。
| 種類 | ブランチのネーミングルール |
|---|---|
| 機能追加系 | feature/#{ISSUE_ID}-#{branch_title_name} |
| ホットフィックス系 | hotfix/#{ISSUE_ID}-#{branch_title_name} |
| 目的 | ブランチ | 確認 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 は禁止です。 |
| 目的 | ブランチ | 確認 URL | 備考 |
|---|---|---|---|
| OGP 作業用 | deploy/new_ogp | なし | OGP の更新用 |
次のコマンドで、自動生成しているコード（libraries/auto_generated 以下のファイル）を再生成してください。
$ yarn generate-data-convertersまた、このとき自動生成された interface の定義が変更されます。必要に応じて各コンポーネントの実装を修正してください。
JSON の構造に変化がなくデータだけ更新された場合は、コマンドを実行する必要はありません。
このプロジェクトでは、Renovateによって依存性の更新を管理しています。
適用されるルールについては、renovate.jsonを参照してください。
このプロジェクトでは、Node.js を Renovate の管理対象から除外しています。
Node.js のバージョンを更新したい場合、次の手順に従ってください。
- このプロジェクトの現在の Node.js バージョンを確認
- 現在の Node.js バージョンを示す文字列（例：14.16.x）をすべて新しいバージョン（例：14.16.y）に置換
- 指定した Node のバージョンを手元の環境にもセットアップしてから yarn.lock を再生成しコミットする
Visual Studio Code などのエディタの検索機能で一括置換するのが簡単でしょう。