Skip to content

Latest commit

 

History

History
126 lines (82 loc) · 5.34 KB

FOR_DEVELOPERS.md

File metadata and controls

126 lines (82 loc) · 5.34 KB
Raw

開発者向け情報

1. 環境構築

以下のアプリケーションを開発をおこなう環境へインストールします。

アプリケーション名 バージョン(指定がある場合のみ、記載する) インストール条件
Node.js 10.23.2以上 必須
Visual Studio Code Visual Studio Codeを利用する場合
yarn 本プログラムをyarnで実行する場合
docker compose 本プログラムをdocker composeで実行する場合
Vagrant 本プログラムをVagrantで実行する場合

1-1. Visual Studio Codeの拡張機能

Visual Studio Codeを利用する場合は、以下の拡張機能をインストールします。

拡張機能 インストール条件
ESLint 任意
Vetur 任意
TSLint 任意
Debugger for Chrome 任意
Remote Development Visual Studio CodeでRemote Developmentを利用する場合

2. 実行

コマンドの実行は、WorkingCopyのルートディレクトリでおこないます。

2-1. yarn を使う場合

2-1-1. 依存関係を構築する

# install dependencies
$ yarn install

2-1-2. プログラムを実行する

以下のコマンドを実行した後、 http://localhost:3000 にアクセスすると、開発中のプログラムを確認する事ができます。

2-1-2-1. 通常
# serve with hot reload at localhost:3000
$ yarn dev
2-1-2-2. 軽量モード

開発用ローカルサーバが重い場合、以下のようにアクセシビリティチェック(vue-axe)を無効にして、起動できます。

# 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 にアクセスすると、開発中のプログラムを確認する事ができます。

# serve with hot reload at localhost:3000
$ docker-compose up --build

2-2-2. トラブルシュート

2-2-2-1. Cannot find module **** と怒られた時

プログラムを止め、以下のコマンドを実行します。

# serve with hot reload at localhost:3000
$ docker-compose run --rm app yarn install

2-3. Vagrant を使う場合

2-3-1. 依存関係を構築し、プログラムを実行する

以下のコマンドを実行した後、 http://localhost:3000 にアクセスすると、開発中のプログラムを確認する事ができます。

# 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の画像 (外部サイト)のように、左下部の「Open Folder in Container」でこのリポジトリのルートを選択すれば、環境構築が始まります。

環境を構築した後に http://localhost:3000 にアクセスすると、開発中のプログラムを確認する事ができます。

2-4-2. Topic

  • 設定を変更したい場合は、devcontainer.json reference (外部サイト)を参照し、.devcontainer/devcontainer.jsonを変更してください。
  • Remote Container実行時のみ有効な拡張機能「ESLint」を導入していますが、必要に応じて.devcontainer/devcontainer.jsonのextensionsに追加してください。 詳細な手順は、Managing extensions (外部サイト)を参照してください。
  • 開発環境を再構築する場合は、左下部の「Rebuild Container」を実行してください。

2-5. Gitpodで開発する場合

以下のボタンを押し、GitHubアカウント認証をすると、自動的にリモート開発環境のセットアップが行われます。

Open in Gitpod

無償ユーザーは月50時間まで利用できます。

3. 本番環境/その他の判定

process.env.GENERATE_ENV の値が、本番の場合は'production'に、それ以外の場合は 'development' になっています。
テスト環境のみで実行したい処理がある場合は、こちらの値をご利用ください。