以下のアプリケーション開発をおこなう環境へインストールします。
| アプリケーション名 | バージョン(指定がある場合のみ、記載する) | インストール条件 |
|---|---|---|
| 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サイトの更新が自動的におこなわれます。
| ブランチ | HTML類がbuildされ、更新されるブランチ | 更新されるWebサイト |
|---|---|---|
master |
production |
本番サイト https://stopcovid19.metro.tokyo.lg.jp/ |
staging |
gh-pages |
ステージングサイト https://stg-covid19-tokyo.netlify.app/ |
development |
dev-pages |
開発用サイト https://dev-covid19-tokyo.netlify.app/ |
development 以外は、Pull Request は禁止です。 Pull Request を送る際のブランチは、以下のネーミングルールに従ったブランチにしてください。
| 種類 | ブランチのネーミングルール |
|---|---|
| 機能追加系 | feature/#{ISSUE_ID}-#{branch_title_name} |
| ホットフィックス系 | hotfix/#{ISSUE_ID}-#{branch_title_name} |
| 目的 | ブランチ | 確認URL | Pull requestsを出せる人 | 備考 |
|---|---|---|---|---|
| 開発 | development | https://dev-covid19-tokyo.netlify.app/ | 全開発者 | base branch。基本は、このdevelopmentブランチに Pull Requestを送ってください。 |
| ステージング | staging | https://stg-covid19-tokyo.netlify.app/ | 管理者のみ | 本番前の最終確認用。管理者以外の Pull Request は禁止です。 |
| 本番 | master | https://stopcovid19.metro.tokyo.lg.jp/ | 管理者のみ | 管理者以外の Pull Request は禁止です。 |
| 目的 | ブランチ | 確認URL | 備考 |
|---|---|---|---|
| 本番サイトHTML | production | https://stopcovid19.metro.tokyo.lg.jp/ | 静的ビルドされたHTMLが置いてある場所 |
| ステージングサイト HTML | gh-pages | https://stg-covid19-tokyo.netlify.app/ | 静的ビルドされたHTMLが置いてある場所 |
| 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などのエディタの検索機能で一括置換するのが簡単でしょう。