ソースコードのクローンに成功したら、次にクローンしたソースコードをローカルで実行してみましょう。
ローカルで実行することにより、ソースの修正を効率的にすすめることが出来ます。
ここでは、Web、App、サーバーのソースの実行方法を説明します。
目次
環境構築
ソースの実行には以下がローカルにインストールされている必要があります。 ローカルにインストールされていないものがある場合、適宜インストールを行ってください。 すでにローカルにインストールされている場合、バージョンが問題ないかを確認してください。
- Node ver 14
https://nodejs.org/ja/ - npm
https://docs.npmjs.com/downloading-and-installing-node-js-and-npm - yarn
https://yarnpkg.com/getting-started/install - Go ver 1.16
※サーバーをDockerで実行しない場合に必須
https://golang.org/ - Docker
※サーバーをDockerで実行する場合に必須
https://www.docker.com/get-startedre
Webのローカルでの動かし方
Webをローカルで動かす場合は以下のコマンドを実行します。
なお、これ以降で紹介するコマンドはクローンを行なったプロジェクトのルートディレクトリで実行してください。
# 必要なnpmパッケージをインストール
yarn install
# GCPで実行しているサーバーに接続して実行
yarn run dev
これで、サーバーに繋がった状態で実行しWeb画面を表示することが出来ます。
また、4行目の”dev”に関しては、環境ごとに種類があります。
こちらの種類は、全てpackage.jsonに記載されており、以下がその内容です。
"scripts": {
"dev": "nuxt --dotenv ./env/.env",
"dev:dev": "nuxt --dotenv ./env/.env.dev",
"dev:stg": "nuxt --dotenv ./env/.env.stg",
"dev:prod": "nuxt --dotenv ./env/.env.prod",
"build": "nuxt build --dotenv ./env/.env",
"build:dev": "nuxt build --dotenv ./env/.env.dev",
"build:stg": "nuxt build --dotenv ./env/.env.stg",
"build:prod": "nuxt build --dotenv ./env/.env.prod",
"start": "nuxt start",
"generate": "nuxt generate"
},
2~5行目の”dev” ~ “dev:prod”までが環境ごとの、実行コマンドです。
例えば、ローカルで実行しているサーバーに接続するためには以下を実行します。
当然ですが、以下のコマンドをローカルで動かしているサーバーがない状態で実行してもWeb画面は正常に表示されませんのでご注意ください。
yarn run dev:dev
なお、スクリプトに記載されている通り、それぞれのコマンドの違いは、envファイルの読み込み先です。
envファイルにはサーバーの接続先が記載されています。
例えば、.env.devは以下のようになっています。
NUXT_ENV_API_BASE_PATH=http://localhost:5000/api/v1
envディレクトリ配下にenvファイルが配置されていますので、必要に応じてご確認ください。
Appのローカルでの動かし方
Appをローカルで動かす場合は以下のコマンドを実行します。
# 必要なnpmパッケージをインストール
yarn install
# GCPで実行しているサーバーに接続して実行
yarn run start
# アプリを実行
yarn run ios
又は
yarn run android
なお、4行目の”start”はWebと同様に環境ごとに種類があります。
Webと同様のなので詳しい説明は割愛しますが、例えばローカルで実行しているサーバーに接続するためには以下を実行します。
yarn run start:dev
サーバーのローカルでの動かし方
サーバーをローカルで実行する場合は以下のコマンドを実行します。
export GOPATH=`pwd`
cd ./src/app
go mod download
go build -o main main.go
./main
なお、ローカルにDockerがインストールされていて、Dockerで実行したい場合は以下のコマンドでも実行可能です。
cd ./src/app
docker-compose up
ローカルでのOpen APIの変更
最後に、ローカル環境で開発を行っていく中でサーバーのAPIを追加や変更し、そのAPIをローカルでWebやAppから呼び出す場合の手順を紹介します。
なお、以下の手順を行わなくとも、サーバーの修正をGSRにPushした上で、TemPlat Consoleのビルド画面からOpen APIを更新することでOpen APIは更新可能です。
ただし、開発中のAPI等、一旦ローカルでWebやAppからの疎通確認をしたい場合は以下の手順で行うことが出来ます。
- サーバーでswagger.yamlを生成
- swagger.yamlをWebもしくはAppにコピー
- コピーしたswagger.yamlからOpen APIを生成
1. サーバーでswagger.yamlを生成
サーバーではApplication handler files (*_handler.go)に記載されているGoDocからswagger.yamlを生成します。
なお、GoDocからswagger.yamlの生成にはswagを使用していますので、記載方法が分からない場合はリンクからご確認ください。
swagger.yamlの生成はサーバーで以下のコマンドを実行します。
cd ./src/app
sh swagger.sh
2. swagger.yamlをWebもしくはAppにコピー
次に生成したswagger.yamlをコピーし、WebもしくはAppのswagger.yamlを更新します。
それぞれのswagger.yamlの場所を下記に記載しますので、サーバーのものをWebもしくはAppにコピーしてください。
種類 | パス |
サーバー | /src/app/docs/swagger.yaml |
Web | /apis/swagger.yaml |
App | /src/apis/swagger.yaml |
3. コピーしたswagger.yamlからOpen APIを生成
最後に、コピーしたswagger.yamlからOpen APIを生成します。
Open APIの生成にはWebもしくはAppで以下のコマンドを実行します。
sh swagger.sh
以上でOpen APIの更新は完了です。
WebやAppから変更を行なったAPIを呼び出すことが出来ます。
なお上記1. ~ 3.で行った修正はそのままGSRにPushして頂いて問題ありません。
(次回のサーバービルド時やOpen API更新時に上書きされますが、差分は出ません。)