皆さんこんにちは！

今日は.envファイルについて書いていきます。

ところで皆さん、例えばバックエンドとのやり取りを行う際、URLはどういう風に書かれていますか？

axios.get('http://127.0.0.1')

こんな風に書くと思います。

ただ、これを毎回コピーして持ってくるのって正直めんどくさいかと。

また、実際にサーバーにあげる時って、http://127.0.0.1のようなローカルホストとは通信を行いませんよね？？？

他にも、シークレットキーなど第三者に知られてはいけない情報をファイルに直接書き込むのは良くありません。

ここで、登場するのがenvファイルです！

聞き覚えのある方もいれば、全く聞いたことがないという人もいます。

全く知らなくても大丈夫！

この記事を見て、.envファイルを使いこなしていきましょう！！

一度使うと恐らくやめられないくらい便利なので、ぜひ見て下さい！

それでは順を追って説明しています。

.envと.env.productionの作成#

プロジェクト直下に.envと.env.productionを作成します。

project/
┣ public/
┣ src/
.env
.env.produnction

こんな感じで作ります。

copy nul .env
copy nul .env.production

Macの方はtouchで作成してください。

また、コマンドプロンプトでの作業に慣れてない方は、手動で作成してもOKです。

固定値の設定#

次に、固定値を以下のように定めます。

/.env

VUE_APP_BACKEND_SITE_URL = 'http://127.0.0.1'

/.env.production

VUE_APP_BACKEND_SITE_URL = 'https://example.com'

また、ビルドした際に.env.productionを参照できるようにpackage.jsonのbuildに--mode productionを追加します。

package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode production",
}

ローカルサーバーを立ち上げてる人は一旦止めて下さい。

止めないと、.envファイルは更新されません。

名前を付けるときは、VUE_APPから必ず始めて下さい！！！

そして、これを実際に呼んでみたいと思います。

index.js

axios.get(process.env.VUE_APP_BACKEND_SITE_URL).then(() => {})

process.envで始め、先ほど設定したキー名を付けます。

これで、ローカル環境の時はhttp://127.0.0.1がコールされ、実際のサーバーではhttps://example.comがコールされます。

他にも、Saasを利用する際のAPIキーなどもここに保管しておくことが重要です。

簡単かつ作業効率もぐっと上がります！

また、セキュリティ面でも活躍するのでどんどん使ってください！！！

以上、「初心者必見！固定値（キー、URLなど）は.envファイルに書いて再利用しよう！！」でした！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading