環境変数の設定
-
環境ごとに環境変数を分ける
-
APP配下に以下の3つのファイルを作成する
- 開発環境：development
- 検証環境：staging
- 本番環境：production
-
開発環境
env.development.js
module.exports = {
// mockを使って開発を進めるとき ポートはswagger用リポジトリのdocker-compose.yamlで設定
apiBaseUrl: "http://mock:8080/"
// apiの作成が完了したら ポートはapi用リポジトリのdocker-compose.yamlで設定
apiBaseUrl: "http://app:1323/"
}
※ swagger用とapi用のdocker-compose.yamlを一部抜粋
swagger/docker-compose.yaml
services:
mock:
image: swaggermock/swagger-mock
ports:
- 0.0.0.0:8081:8080
volumes:
- ./swagger.yml:/openapi/swagger.yml
environment: |
SWAGGER_MOCK_SPECIFICATION_URL: /openapi/swagger.yml
networks:
- internal
- external
api/docker-compose.yaml
services:
app:
build: // 省略
volumes: // 省略
command: // 省略
ports:
- 1323:1323
environment:
- PORT=1323
- DB_HOST=db
- DB_USER=root
- DB_PASSWORD=
- DB_PORT=xxxx
- DB_DATABASE=nuxt-app
- 検証環境
env.staging.js
module.exports = {
apiBaseUrl: "http://stg-api.nuxt-app.com/"
}
- 本番環境
env.production.js
module.exports = {
apiBaseUrl: "http://api.nuxt-app.com/"
}
APIの呼び出し
-
apiBaseUrl以下のAPIパスを設定する
index.vue
<script>
const url = process.env.apiBaseUrl + "users/index"
export default {
async asyncData() {
const result = await axios.get(url)
return {
users: result.data
}
}
</script>
package.jsonの設定
package.json
{
"name": "nuxt-app",
"version": "1.0.0",
"description": "nuxt-app project",
"author": "名前",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"build:stg": "cross-env NODE_ENV=\"staging\" nuxt build",
"build:prod": "cross-env NODE_ENV=\"production\" nuxt build",
"start": "nuxt start",
"start:stg": "cross-env NODE_ENV=\"staging\" nuxt start",
"start:prod": "cross-env NODE_ENV=\"production\" nuxt start",
"generate": "nuxt generate",
"test": "jest",
"prettier": "prettier --write ./{components,layouts,middleware,pages,plugins,store,test}/**/*.{js,vue}"
},
// 省略
}
nuxt.config.jsの設定
nuxt.config.js
const environment = process.env.NODE_ENV
const envSet = require(`./env.${environment}.js`)
export default {
env: envSet,
// 省略
}