docker 部署 nuxt 项目到阿里云 ECS

使用 Webstorm IDE 和插件 Alibaba Cloud Toolkit，结合 docker-compose 快速部署 nuxt 项目到阿里云 ECS 服务器

概述

有一个使用 nuxtjs 开发的 ssr 网站，需要部署到阿里云 ECS，部署的方法有很多，根据需求不同，有几点需要注意：

ssr 项目，不可避免的会有 node_modules 文件夹，文件过多上传会导致超时，需要打包成压缩文件上传以节省上传时间
开发机器系统为 Windows，避免系统差异，需要使用 docker 进行依赖安装和编译，交给开发机器执行以节省服务器资源
尽可能减少部署所需的操作，通过脚本执行 docker 相关命令，通过 Webstorm IDE 的 Alibaba Cloud Toolkit 插件，选择 Deploy to ECS 功能，自动在上传文件后执行相应命令

在 Webstorm IDE 中选择 Tools - Alibaba Cloud - Deploy to ECS，选择压缩文件目录 ./output/dist.tar.gz，选择账号下的 ECS 服务器，在 Target Directory 中输入服务器上部署的路径，以 /var/www/yunpansoso/web 为例，接着选择命令，添加一条命令 tar -xzf dist.tar.gz && docker-compose up -d --force-recreate，选择 Advanced，在 Before deploy 中选择命令，添加一条命令 rm /var/www/yunpansoso/web -rf，在部署前清空目录。

docker-compose.yml 和 Dockerfile

服务器上用于 docker-compose up 的文件如下，此外还使用了公用 nginx-proxy 服务用于转发多个网站

yaml

# docker-compose.yml
version: '3'
services:
  yunpan-nginx:
    image: nginx:stable-alpine
    container_name: yunpan-nginx
    restart: always
    ports:
      - 8081:80
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
  yunpan-web:
    container_name: xxx-web
    image: liuq/yunpansoso-web-web:0.0.1
    restart: always
    build: .
    ports:
      - 9001:9001
    volumes:
      - ./:/code

1234567891011121314151617181920

dockerfile

# Dockerfile
FROM node:lts-alpine3.14
WORKDIR /code
CMD ["npm", "start"]

1234

公用 nginx-proxy 服务

nginx-proxy 文件如下，简单文件直接通过 Alibaba Cloud 步骤执行即可

yaml

# docker-compose.yml
version: "3"
services:
  nginx-proxy:
    image: nginx:stable-alpine
    container_name: nginx-proxy-basic
    restart: always
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf

123456789101112

nginx

# nginx.conf
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  300;
    server {
        listen       80;
        server_name  www.example.com;
        location / {
          proxy_pass  http://<公网 IP 地址>:8081;
        }
    }
}