開発環境と本番環境でAPIのURLを切り替えたいと思ったので調べました。
他の記事で紹介されている方法よりもシンプルに実現できたと思います。
目次
環境
- OS : Windows
- ターミナル : PowerShell
- Node.js : 6.14.15
- Nuxt.js : 2.15.8
- SPAモード
- @nuxtjs/axios : 5.13.6
OSがWindowsになっていますが、Linuxでも動くように組めているはずです。
パッケージのインストール
最近のNuxt.jsはdotenvが標準で入っていますが、
dotenv-cliが入っていないのでインストールします。
npm install --save-dev dotenv-cli
# 省略形
npm i -D dotenv-cli
バージョンは4.0.0でした。
.envファイルの作成
以下のようなフォルダ構成で作成してみました。
- ProjectRoot
- env
- dev.env
- prod.env
- package.json
- etc…
- env
# dev.env
API_URL='http://localhost:7071/api'
# prod.env
API_URL=API_URL='https://example.com/api'
余談ですが.envファイルは#を使えば1行コメントできるみたいですね。
package.jsonファイルの編集
「node run dev」や「node run build」などを打った時に実行されるスクリプトを編集します。
dotenv -e で参照される.envファイルが切り替わるようにします。
"scripts": {
"dev": "dotenv -e env/dev.env nuxt",
"dev:prod": "dotenv -e env/prod.env nuxt",
"build": "dotenv -e env/prod.env nuxt build",
"start": "nuxt start",
"generate": "dotenv -e env/prod.env nuxt generate",
"lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
"lint": "npm run lint:js",
"test": "jest"
},
Nuxt.config.jsファイルでaxiosのconfig編集
デフォルトで設定したURLがaxiosで使われるようにするため、Nuxt.config.jsファイルを編集しようとしたのですが、
よく調べてみると、特に設定をしなかった場合、axiosは環境変数API_URLを読み込んでくれるようですので、今回ファイルの編集は不要でした。
APIを呼んでみる
今回のCSSフレームワークはVuetifyです。
<v-card>
<v-card-title class="headline"> Welcome to the Vuetify + Nuxt.js template </v-card-title>
<v-card-text>
<v-form>
<v-text-field v-model="lastname" label="LastName"></v-text-field>
<v-text-field v-model="firstname" label="FirstName"></v-text-field>
<v-text-field v-model="email" label="Email"></v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn color="primary" @click="register()">Register</v-btn>
</v-card-actions>
</v-card>
<script>
export default {
data () {
return {
lastname: '',
firstname: '',
email: ''
}
},
methods: {
register () {
this.$axios.post('/contact_create', {
lastname: this.lastname,
firstname: this.firstname,
email: this.email
})
.then(res => alert("succeed"))
.catch(err => alert("failed : " + err))
}
}
}
</script>