Nuxt部署到Docker环境

记录一下Nuxt博客项目部署到Docker环境的过程，这可能对将要部署Nuxt应用到Docker环境的你有所帮助~

编写Dockerfile文件

在你的Nuxt项目目录下编写Dockerfile如下示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

FROM node:12.16.2

# 创建容器工作目录
RUN mkdir -p /app
WORKDIR /app

# 拷贝package.json文件到容器工作目录，
# 注意这个地方为什么没有拷贝yarn.lock或package-lock.json文件呢?
# 原因是这样子的，如果你本地不是使用的淘宝的镜像源，而是使用的默认镜像源，
# 这个时候你将它拷贝进来安装依赖的时候会有一个很大彩蛋，安装不成功！
# 拷贝不拷贝yarn.lock或package-lock.json文件自己决定哦
COPY package.json /app

# 安装Nuxt项目依赖，如果你是中国用户这个配置镜像库源的操作是必须的要不然你安装依赖是不是成功的，大环境如此，汝之奈何!
RUN yarn config set registry 'https://registry.npm.taobao.org'
RUN yarn install

# 设置容器环境变量
ENV NODE_ENV=production
ENV HOST 0.0.0.0

# 拷贝当前项目目录到容器内工作目录，注意添加.dockerignore文件忽略不必要的文件或目录
COPY . /app

# 编辑Nuxt应用
RUN yarn build

# 在容器内部向外(宿主机)暴露端口号
EXPOSE 3000

# 容器运行时要执行的命令，这里是启动Nuxt应用
CMD ["yarn", "start"]

关于这个Dockerfile用到命令解释如下：

  • FROM: 基础镜像，你现在要运行Nuxt应用是不是要用Node环境对吧！
  • RUN: 告诉Docker我要执行什么命令。
  • WORKDIR: 指定容器工作目录。
  • COPY: 将宿主主机文件拷贝到容器环境内。
  • ENV: 在容器内部设置环境变量。
  • EXPOSE: 指定容器内部向外(也就是宿主主机，何为宿主主机，就是运行你Docker服务的机器)暴露的端口。
  • CMD: CMD 容器启动命令。有两种格式，第一种：shell格式(如：CMD yarn start)，第二种：exec格式(如：CMD [“yarn”, “start”])，上面的Dockerfile使用的是exec格式。

编写docker-compose.yaml文件

为什么要用docker-compose.yaml文件来管理docker容器服务呢，方便，并且可定制的空间更大，其实有了上面的Dockerfile你就可以编译出一个镜像进行单独运行容器，不过单独运行容器有一个缺点那就是你要输入长的命令及参数来运行容器，管理起来在实属不便，你下次启动一个同样配置的容器是不是还要再次输入一遍，是不是很不便，那有了docker-compose.yaml文件这一切都将变的更美好了，编写好相关的配置参数后就可以通过简单的几个命令来管理容器服务，是不是很酷！来吧看一怎么写！不过你要使用docker compose来管理容器服务，需要先进行安装docker compose服务！如何安装可以参考官网DockerCompose安装。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

version: "3.6"
services:
    nuxt-server:
        container_name: nuxt-container
        build: "."
        ports:
            - '3000:3000'
        restart: always
        networks:
            - nuxt-server-net
            - externals
networks:
    nuxt-server-net:
        driver: bridge

    externals:
        external: true

关于这个docker-compose.yaml用到命令解释如下：

  • version: 指定docker compose file使用哪个版本的语法。
  • services: 指定这个docker compose file下有哪些服务。
  • nuxt-server: 指定当前docker compose file管理的应用服务，这里是nuxt-server当然你也可以指定其它名称。
  • container_name: 应用服务nuxt-server运行时所在的容器名称，这里是nuxt-container一般用提供目标命名。
  • build: 应用服务nuxt-server构建目标这里是当前项目下，它会在项目目录下找到Dockerfile作为构建依据来构建镜像。
  • ports: 应用服务nuxt-server内部暴露的端口号3000与宿主主机3000端口关联，注意：前面的是宿主主机端口号，后面是容器内部暴露的端口号。可以有多个要根据容器向外暴露而定。
  • restart: 可选值[“no”, always, on-failure, unless-stopped]
  • networks: 使用的网络，这里定义了一个nuxt-server-net和externals网络，externals用于在容器与容器之间通信。

编译docker-compose.yaml文件

如果想要构建出镜像可以使用build命令

1

$ docker-compose build

运行docker composer管理的容器服务

如果想要运行docker composer管理的容器服务可以使用up命令

1

$ docker-compose up -d

停止docker composer管理的容器服务

如果想要停止docker composer管理的容器服务可以使用down命令

1

$ docker-compose down

使用docker环境内的NGINX代理Nuxt服务

Docker下的NGINX容器服务不应该和某一个应用强度关联，那你要是一台服务器上就跑这Nuxt应用，你可以将在docker-composer.yaml中也构建出NGINX容器，不过我真是不建议这么做，因为如果你有一个NGINX容器向外与宿主主机已关联，那么你在启动新的NGINX容器与主机关联的时候80端口就不能再用了，那如果你一台服务都需要通过80提供服务，那你应该单独建立一个项目维护NGINX容器服务，可以参考我的另一篇博文《Docker下如何优雅的管理你的NGINX》。你只需求添加一个nginx服务配置文件即可！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

map $sent_http_content_type $expires {
    "text/html"                 epoch;
    "text/html; charset=utf-8"  epoch;
    default                     off;
}

server {
    listen 443 ssl;
    server_name wumoxi.com;

    # SSL signature.
    ssl_certificate /etc/nginx/ca/wumoxi.com/cert.pem;
    ssl_certificate_key /etc/nginx/ca/wumoxi.com/cert.key;
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout 5m;

    # Http response body max size.
    client_max_body_size 8m;

    gzip on;
    gzip_types text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

    # Match router of the root.
    location / {
        expires $expires;
        proxy_redirect off;
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto  $scheme;
        proxy_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass http://nuxt-server:3000;
    }

    # Media: images, icons, video, audio, HTC.
    location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
        expires 1d;
        access_log off;
        add_header Cache-Control "public";
        proxy_pass http://nuxt-server:3000;
    }

    # CSS and Javascript.
    location ~* \.(?:css|js)$ {
        expires 1d;
        access_log off;
        add_header Cache-Control "public";
        proxy_pass http://nuxt-server:3000;
    }

    # location ~ /\.ht {
    #     deny all;
    # }
}

server {
    listen 80;
    server_name wumoxi.com;
    rewrite ^(.*) https://$host$1 permanent;
}

注意proxy_pass指定的是nuxt-server加端口，重新编译你的NGINX管理的docker-compose.yaml文件之后，启动服务即可！你现在可以访问域名进行验证啦~

截屏2020-04-21下午2.18.47.png

comments powered by Disqus