现在开始使用Docker？在每种环境下运行Nuxt.js？


这是Qiita的第一篇帖子。这是藤原修平。
我们通常在内部开发自己的服务。我在前端(Vue.js，Nuxt.js)和后端(Java，Spring)都在努力工作。
在工作之外，我只是在学习UX。
我正在考虑在这里写各种东西。

今天是Nuxt.js的故事。

您为什么决定写它？

我将Nuxt.js用于业务，但是我需要阅读每种环境的配置文件。
(在本地设置环境变量并检查操作???)有点废话。那时，他是打我头的人。
docker.png

是的，使用Docker。

我从未使用过Docker，所以让我们抓住这个机会！考虑到这一点，我将进入主要主题。

提前准备

Docker首先是什么？

让我们借用我们前辈的智慧。
这很容易理解。

如何安装Docker

让我们借用官方的智慧。
这次，我使用了Docker for Mac。
https://docs.docker.com/docker-for-mac/install/

正在准备Nuxt.js

使用Nuxt.js

准备特定于环境的配置文件

此处使用的代码。
https://github.com/kdmoaa/docker-nuxt

这次，我们准备了以下环境。

  • 开发：开发环境
  • 分期：分期环境
  • 生产：生产环境

为每个环境准备一个配置文件。
开发环境文件作为示例发布。

env.development.js

1
2
3
module.exports = {
  envVar: 'development' // ここにAPIなどを定義して環境ごとに切り分けたり
}

使用Nuxt.js引用环境变量并隔离要使用的文件。

nuxt.config.js

1
2
3
4
5
6
7
8
9
const environment = process.env.NODE_ENV || 'development'
const property = require(`./env.${environment}.js`)

module.export = {
// 中略
    env: {                        
        envProp: property.envVar
    }
}

可以由

组件中的process.env.envProp引用。

索引值

1
2
3
4
5
6
7
8
9
<script>
export default {
  data() {
    return {
      env: process.env.envProp
    }
  }
}
</script>

小贴士

https://ja.nuxtjs.org/api/configuration-env/#process-env-
尽管它已正式列出，但请注意，如果仅process.env，则不会返回任何内容。
(我认为我可以尝试一下，如果仅定义process.env，它将无法正常工作。)

跨环境隔离环境

cross-env是一个节点库。它根据环境变量更改执行任务。
使用npm -i --save cross-env导入并在package.json脚本中准备任务。

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "name": "nuxt-docker",
  "version": "1.0.0",
  "description": "My ultimate Nuxt.js project",
  "author": "kdmoaa",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "build:stg": "cross-env NODE_ENV="staging" nuxt build",
    "build:prod": "cross-env NODE_ENV="production" nuxt build",
    "start": "nuxt start",
    "start:stg": "cross-env NODE_ENV="staging" nuxt start",
    "start:prod": "cross-env NODE_ENV="production" nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "cross-env": "^5.2.0",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "nodemon": "^1.11.0"
  }
}

它查看

环境变量NODE_ENV以确定启动任务。好的！ !!

准备docker

使用docker

准备多个环境

这次我使用docker-compose。
也许仅靠docker就足够了，但是docker-compose似乎很容易找到。
我想知道以后是否会在这里写出一些差异。

首先，准备docker-compose.yml。

docker-compose.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
version: "3"
services:
  web:
    build:
      context: ./
    privileged: true
    volumes:
      - "../app/:/usr/local/app"  ## ../app/に存在するNuxtプロジェクトをdockerの/usr/local/app/に配置
    ports:
      - 80:80
      - 3000:3000
    container_name: "nuxt-docker-dev"
    environment:
      - NODE_ENV=development  ## nuxt.config.jsで利用する環境変数 NODE_ENV を定義

接下来，准备一个Dockerfile。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
FROM centos:7.4.1708

RUN yum -y update

RUN yum -y install epel-release
RUN yum -y install http://rpms.remirepo.net/enterprise/remi-release-7.rpm

RUN yum -y upgrade
RUN yum -y install nginx

RUN curl -sL https://rpm.nodesource.com/setup_9.x | bash -
RUN yum install -y gcc-c++ make
RUN yum install -y nodejs
RUN yum install -y wget
RUN wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo
RUN yum install -y yarn

ENV HOST 0.0.0.0

CMD ["nginx", "-g", "daemon off;"]

WORKDIR /usr/local/app

这样就完成了所有准备工作。

好吧，让我们移动

您所要做的就是执行它。

1
2
3
4
5
6
7
8
$ docker-compose build  # dockerを構築
$ docker-compose up -d  # デーモンでコンテナを立ち上げる
$ docker-compose exec web bash  # 実行してコンテナに入る

# ここからdockerコンテナ内で操作
$ yarn install
$ yarn run build  # 環境は指定しなくても勝手に分けてくれる
$ yarn start

在

/ development下执行docker-compose时，它变成这样，
development.png

如果您在

/ staging下执行docker-compose，则将像这样。
staging.png

我做到了，成功了！

参考

  • https://knowledge.sakura.ad.jp/13265/
    我了解了谁在这里。

  • https://qiita.com/ProjectEuropa/items/d9ee1b8c96084e3bab55
    请参阅此处以了解如何编写docker-compose.yml和Dockerfile。