share facebook facebook twitter menu hatena pocket slack

2019.01.09 WED

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

甲斐 甲

WRITTEN BY 甲斐 甲

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なし版)
https://cloudpack.media/44910

今回のソースは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

uxt.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',
    }
  }

  /**
   * overide 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/

はい。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/

元記事はこちら

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

甲斐 甲

甲斐 甲

2018/7にJOIN。 最近の好みはサーバレスです。なんでもとりあえず試します。

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。