Midwayjs部署环境-Docker

J_TsMask
412 阅读4分钟

Midwayjs部署环境-Docker

准备工作

Docker 服务安装步骤可以自行了解，服务器上需要安装运行以下应用程序并确保正常连接运行。

SDK说明版本
Nginx优秀代理服务器1.20+
Nodejsnode项目的运行环境18+
Redis缓存存储程序6+
Mysql数据存储程序8+

使用国内源可以加速下载依赖库

设置为默认源 npm config set registry registry.npmmirror.com

后端服务

建议在开发环境下对 src\config\config.prod.ts 文件修改对应的服务器上能正常访问的服务配置。

/home/user/mask_api_midwayjs 作为后端接口目录，将以下文件内容上传到服务器目录

mask_api_midwayjs
├── assets                      目录-程序内部静态资源文件
├── src                         目录-源代码
├── bootstrap.js                文件-程序部署启动运行入口
├── Dockerfile                  文件-Docker编译文件
├── package.json                文件-程序依赖及启动命令信息
└── tsconfig.json               文件-typescript配置

进入后端接口目录，检查下 Dockerfile 文件确保内容完整，编译生成镜像约700MB左右。

FROM node:18-alpine

RUN npm config set registry https://registry.npmmirror.com

ENV TZ="Asia/Shanghai"

## 工作目录存放程序源码
WORKDIR /home/mask_api_midwayjs

## 复制实际需要的文件到工作目录
COPY ./assets ./assets
COPY ./src ./src
COPY ./bootstrap.js ./
COPY ./package.json ./
COPY ./tsconfig.json ./

## 使用pm2启动需要安装为全局依赖
RUN npm install pm2 -g

## 安装程序依赖，需要编译
RUN npm install

## 进行源码编译
RUN npm run build

## 暴露端口要与程序端口一致
EXPOSE 6275

## 程序启动命令
CMD ["npm", "run", "start:docker"]

注意：在容器中需要使用 pm2-runtime 保持在容器中前台常驻避免容器运行结束退出。

容器启动

# 编译成镜像
docker build -t mask_api_midwayjs:1.0.0 .

# 运行镜像容器-link互联服务
docker run -itd \
--name midway-server \
--privileged=true \
--restart=always \
--link=mysql<Docker服务名称>:mysql \
--link=redis<Docker服务名称>:redis \
-v /home/<映射本地资源路径>:/home/mask_file \
-p <Docker映射端口>:6275 \
-m 512m \
mask_api_midwayjs:1.0.0

# 运行镜像容器-net网络服务
docker run -itd \
--name midway-server \
--privileged=true \
--restart=always \
-v /home/<映射本地资源路径>:/home/mask_file \
-p <Docker映射端口>:6275 \
-m 512m \
mask_api_midwayjs:1.0.0

关于 link互联服务 和 net网络服务说明：

  • 容器是独立的系统环境，容器内部不要使用 127.0.0.1 去连接你本地服务。
  • link 使用外部服务的容器名映射给到容器内部作为网络地址变量使用。
  • net 是直接根据Docker网卡上运行的镜像容器IP直接进行访问，或者其他可供连接的IPAddress。

镜像容器IP地址可以通过 docker inspect 镜像容器ID，找到Networks内IPAddress。镜像容器内部是可以直接访问Docker中运行的镜像容器服务地址，类似局域网没有防火墙是可以互通的。

  • mask_api_midwayjs:1.0.0 表示 镜像名称:版本号
  • --name 服务名称
  • --privileged 给容器root权限读写挂载文件、访问Docker的host等
  • --restart 容器重启策略
  • --link 互联Docker服务名称，允许内部通过映射名称连接服务
  • -v 挂载映射文件，本地资源路径:内部资源路径
  • -p 设定服务运行端口，本地端口:镜像端口
  • -m 设定服务运行内存大小

前端页面

/home/user/nginx/html/mask-ui 作为前端页面目录

在开发环境下检查 .env.development 文件内配置参数 VITE_HISTORY_BASE_URL 改为 /mask-ui 保存修改后通过 npm run build 命令打包生成dist文件夹。

将dist文件夹内容上传到服务器目录，注意 VITE_API_BASE_URL 是页面请求的服务地址。

mask-ui
├── assets                    目录-资源文件
├── favicon.ico               文件-网站图标
├── index.html                文件-主页
└── index.html.gz             文件-主页gzip压缩

docker+nginx搭建自己的静态服务器

你需要修改 Nginx 配置文件以对页面进行访问，配置文件添加配置内容如下：

Docker内部使用 /usr/share/nginx/html 路径会映射为外部路径。 conf文件行尾序列LF，不要用Tab退格，要用空格哦，不然会显示500哦

# 部署指定路径目录
location /mask-ui {
    root /usr/share/nginx/html;

    try_files $uri $uri/ /index.html;
    index  index.html index.htm;
}

# 部署路径下dist目录
location /dist {
    root   /usr/share/nginx/html;

    try_files $uri $uri/ /index.html;
    index  index.html index.htm;
}

# 代理后端接口服务
location /prod-api/ {
    proxy_pass http://<容器启动后的net网络地址>:6275/;

    proxy_http_version  1.1;
    proxy_cache_bypass  $http_upgrade;
    proxy_set_header Upgrade            $http_upgrade;
    proxy_set_header Connection         "upgrade";
    proxy_set_header Host               $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_set_header X-Forwarded-Host   $host;
    proxy_set_header X-Forwarded-Port   $server_port;
}

开启Gzip，建议在 nginx.conf 文件中开启。

#开启gzip功能
gzip on; 
#开启gzip静态压缩功能
gzip_static on; 
#gzip缓存大小
gzip_buffers 4 16k;
#gzip http版本
gzip_http_version 1.0;
#gzip 压缩级别 1-10 
gzip_comp_level 5;
#gzip 压缩类型
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

修改配置文件后建议将对 Nginx 容器服务重启，以免遇到修改不生效的情况。

如遇到无法解决的问题，可以在下方进行留言，会在第一时间进行解答。

avatar
文章
阅读
粉丝