Nuxt.js와 Serverless로 dotenv 공유

Nuxt.js와 Serverless에서 동일한 .env 파일을 공유 할 수 있습니다.

Nuxt.js의 프로젝트는 다음을 기반으로합니다.

jeehyukwon/nuxt-serverless: Nuxt.js Serverless SSR Starter on AWS (Lambda + API Gateway + S3) with Serverless Framework
htps : // 기주 b. 코 m / 지에 에쿠 쿠 / N XT-Ser rゔぇ r ぇ s

전제

AWS 계정이 있습니다

serverless가 설치 및 설정 됨

node.js, npm (, yarn)이 설치되었습니다

환경 구축

우선 .env 가 공유할 수 있지-라는 것을 확인할 수 있으면 좋으므로, 상기 리포지토리를 단순하게 한 것을 베이스로 합니다.

kai-kou/nuxt-serverless at feature/no-use-s3
htps : // 기주 b. 코 m / 카이 코 / 누드 xt - r ゔぇ r ぇ s / t ree / 훗 아츠레 / 노 - 우세 - s3

베이스로 하는 리포지토리에 관해서는 아래에 이용 방법을 정리하고 있습니다.

Nuxt.js(v2.2.0)+TypeScript 앱을 AWS Lambda+α에 배포해 보았습니다(S3 없음 버전) - Qiita
htps : // 코 m / 카이 _ 코 / ms / t fc4b7780 61f740 5d2

이번 소스는 Github에 업하고 있으므로, 좋으면 참고해 주세요.
htps : // 기주 b. 코 m / 카이 코 / N xt-r r ょ r ぇ s / t ree / 훗 아츠레 / 우세 도텐 v

> 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
htps : // 기주 b. 코 m / 누 xt

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

네. hoge 가 표시되었습니다.

Serverless 플러그인 추가

그런 다음 Serverless에서도 .env를 사용할 수 있습니다. 이쪽도 플러그인이 있었으므로, 그것을 이용시키고 받습니다.

colynb/serverless-dotenv-plugin: Preload Environment Variables with Dotenv into Serverless
htps : // 기주 b. 코 m / 코 lyn b / 세르 ゔぇ r ぇ

> 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
htps : // 기주 b. 코 m / no xt

colynb/serverless-dotenv-plugin: Preload Environment Variables with Dotenv into Serverless
htps : // 기주 b. 코 m / 코 lyn b / 세르 ゔぇ r ぇ

Nuxt.js에서 dotenv 활용하기 – chatbox.blog
htps // 짱 t보 c. rdp rs. 코 m/2018/03/26/누 xt_js_우우 th_도텐 v/

API: env 속성 - Nuxt.js
htps : // 그럼. 없는 xtjs. 오 rg / 아피 / 곤후 글라치 온 - 엔 v /

Reference

이 문제에 관하여(Nuxt.js와 Serverless로 dotenv 공유), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kai_kou/items/4eb83f92296a7311fe39

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)