19
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Nuxt.jsとServerlessでdotenvを共有する

Last updated at Posted at 2018-12-17

Nuxt.jsとServerlessとで同じ.env ファイルを共有できるようにしてみました。

Nuxt.jsのプロジェクトは下記をベースにしています。

jeehyukwon/nuxt-serverless: Nuxt.js Serverless SSR Starter on AWS (Lambda + API Gateway + S3) with Serverless Framework
https://github.com/jeehyukwon/nuxt-serverless

前提

  • AWSアカウントがある
  • serverlessがインストール・設定済み
  • node.js、npm(、yarn)がインストール済み

環境構築

とりあえず.env が共有できるよねーってことが確認できたら良いので、上記リポジトリをシンプルにしたものをベースにします。

kai-kou/nuxt-serverless at feature/no-use-s3
https://github.com/kai-kou/nuxt-serverless/tree/feature/no-use-s3

ベースにするリポジトリに関しては下記に利用方法をまとめています。

Nuxt.js(v2.2.0)+TypeScriptなアプリをAWS Lambda+αにデプロイしてみた(S3なし版) - Qiita
https://qiita.com/kai_kou/items/ffc4b7780e61f740e5d2

今回のソースはGithubにアップしていますので、よろしければご参考ください。
https://github.com/kai-kou/nuxt-serverless/tree/feature/use-dotenv

> mkdir 任意のディレクトリ
> cd 任意のディレクトリ
> git clone https://github.com/kai-kou/nuxt-serverless.git
> cd nuxt-serverless
> git checkout feature/no-use-s3
> npm install

Nuxt.jsのプラグインを追加する

Nuxt.jsで.env から環境変数を読み込むことができるプラグインを利用させてもらいます。

nuxt-community/dotenv-module: Loads your .env file into your application context
https://github.com/nuxt-community/dotenv-module

> npm install --save @nuxtjs/dotenv

.env ファイルを作成しておきます。

> touch .env
.env
HOGE=hoge

nuxt.config.js に設定を追加します。

nuxt.config.js_一部抜粋
const express = require('express')
const cookieParser = require('cookie-parser')
require('dotenv').config()

module.exports = {
  ()
  modules: [
    '@nuxtjs/dotenv',
  ],
  env: {
    HOGE: process.env.HOGE,
  },
}

vue ファイルで環境変数が利用できることを確認するのに、index.vue{{process.env.HOGE}} を利用するようにします。
<template> 内で{{process.env.HOGE}} としてもエラーになるのでご注意ください。

src/pages/index.vue
<template>
  <div class="page-index">
    {{hoge}}
    <h1>Nuxt Serverless Template {{ this.version }}</h1>
    <p>{{ message }}</p>
    <nuxt-link to="/typescript">typescript</nuxt-link>
    <nuxt-link to="/nuxt">nuxt</nuxt-link>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import { State } from 'vuex-class'

@Component
export default class PageIndex extends Vue {

  private get hoge(): string {
    return process.env.HOGE;
  }
  /**
   * You can fetch data from remote server with 'asyncData()' method
   */
  private async asyncData() {
    return {
      message: 'Say Hello to Node.js 8.10 in AWS Lambda and Nuxt 2.0',
    }
  }

  /**
   * override tags in <head> with 'head()' method
   */
  private head() {
    return {
      title: 'Hello, Nuxt Serverless Template',
    }
  }

  @State((state) => state.version) private version: string
}
</script>

<style lang="scss">
.page-index {
  h1 {
    color: #087f5b;
  }
}
</style>

実行して確認してみます。

> npm run dev
> open http://localhost:3000/dev/

スクリーンショット 2018-12-13 9.13.26.png

はい。hoge と表示されました。

Serverlessのプラグインを追加する

続いて、Serverlessでも.env が利用できるようにします。こちらもプラグインがありましたので、それを利用させてもらいます。

colynb/serverless-dotenv-plugin: Preload Environment Variables with Dotenv into Serverless
https://github.com/colynb/serverless-dotenv-plugin#readme

> npm install --save-dev serverless-dotenv-plugin

serverless.yml.env から環境変数を読み込めるようにします。環境変数は${env:HOGE} とすることでアクセスできるようになります。

serverless.yml_一部抜粋
service: nuxt-serverless # 1. Edit whole service name

provider:
  name: aws
  runtime: nodejs8.10
  stage: ${opt:stage, 'dev'}
  region: ap-northeast-1 # 2. Edit AWS region name
  environment:
    NODE_ENV: production
    HOGE: ${env:HOGE}
(略)
plugins:
  - serverless-offline
  - serverless-apigw-binary
  - serverless-dotenv-plugin

デプロイは割愛します。

ポイント

.env.{env} ファイルを取り扱うのにひと手間かかる

serverless-dotenv-pluginはenvironmentから.env.development.env.production などのファイルを自動で探してくれるのですが、@nuxtjs/dotenvの方は、nuxt.config.js で指定する必要があります。

nuxt.config.js_一部抜粋
  modules: [
    ['@nuxtjs/dotenv', { filename: '.env.development' }],
  ]

.env ファイルはコミットしないようにする

.gitnoreに追加してからコミットしましょう。.env の代わりに.env.example などサンプルとなるファイルをリポジトリに含めておけばどんな環境変数を利用するのかわかりやすくなります。

参考

nuxt-community/dotenv-module: Loads your .env file into your application context
https://github.com/nuxt-community/dotenv-module

colynb/serverless-dotenv-plugin: Preload Environment Variables with Dotenv into Serverless
https://github.com/colynb/serverless-dotenv-plugin#readme

Nuxt.js で dotenv を活用する – chatbox.blog
https://chatboxinc.wordpress.com/2018/03/26/nuxt_js_with_dotenv/

API: env プロパティ - Nuxt.js
https://ja.nuxtjs.org/api/configuration-env/

19
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?