前端docker打包思路笔记

前端打包静态资源

例如vue：
假设从直接拿到开发环境的代码开始，可以用以下多阶段构建镜像dockerflie。

FROM node:16-alpine

WORKDIR /app
RUN corepack enable
RUN corepack prepare pnpm@7.32.1 --activate

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

COPY .npmrc package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile

COPY . .
RUN pnpm build

FROM nginx:latest


COPY dist/  /usr/share/nginx/html/

EXPOSE 80

• FROM node:16-alpine
  从名为 node，标签为 16-alpine 的 Docker 镜像作为构建阶段的基础镜像。

• WORKDIR /app
  设置工作目录为 /app，后续的命令将在这个目录下执行。

• RUN corepack enable
  运行 corepack enable 命令，可能是启用了一个名为 corepack 的工具或插件。

• RUN corepack prepare pnpm@7.32.1 --activate
  运行 corepack prepare pnpm@7.32.1 --activate 命令，可能是使用 corepack 工具来准备安装指定版本的 pnpm 包管理器。

• RUN npm config set registry https://registry.npmmirror.com
  设置 npm 的镜像源为 https://registry.npmmirror.com。

• COPY .npmrc package.json pnpm-lock.yaml ./
  将宿主机上的 .npmrc、package.json 和 pnpm-lock.yaml 文件复制到 Docker 镜像的当前工作目录。

• RUN pnpm install --frozen-lockfile
  使用 pnpm 安装依赖，–frozen-lockfile 参数表示使用锁定的依赖版本。

• COPY . .
  将当前目录下的所有文件复制到 Docker 镜像的当前工作目录。

• RUN pnpm build
  运行 pnpm build 命令，可能是用于构建项目。

• FROM nginx:latest
  从名为 nginx，标签为 latest 的 Docker 镜像作为第二个阶段的基础镜像。

• COPY dist/ /usr/share/nginx/html/
  将构建产物中的 dist 目录下的文件复制到 Nginx 镜像中的 /usr/share/nginx/html/ 目录。

• EXPOSE 80
  暴露容器的 80 端口，允许外部访问该端口。

打包好了docker run 查看一下

如果出现
‘Welcome to nginx!‘

说明nginx没有找到静态资源

打开pnpm build生成的dist文件查看静态资源的位置，然后修改
COPY dist/ /usr/share/nginx/html/
确保静态资源的根目录copy到nginx的根目录

也可以在本地打包前端静态资源后上传打包
1 . 在package中找到打包的scripts脚本命令
2 . 运行命令打包得到前端静态资源dist
3 . 在dist同级目录写入dockerfile文件

# 使用官方 Nginx 镜像作为基础镜像
FROM nginx:stable-alpine

# 将 dist 目录中的文件复制到 Nginx 的默认静态文件目录
COPY dist/ /usr/share/nginx/html/

# 暴露 Nginx 的默认端口
EXPOSE 80

4 . 然后运行打包命令；
5 . 运行容器要映射nginx暴露出来的80端口
这样就简单完成了一个前端的docker包。

证书和修改nginx配置

修改dockerfile文件

# 基于nginx:1.20镜像
FROM nginx:stable-alpine
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html/dist/
# 用本地的 nginx.conf 配置来替换nginx镜像里的默认配置
COPY nginx.conf /etc/nginx/nginx.conf
# 将证书文件内容复制到/usr/local/nginx/文件夹下
COPY cert/ /usr/local/nginx/cert/

修改nginx.conf文件

#user  nobody;  # 设置运行nginx的用户，这里注释掉表示使用默认用户

worker_processes  1;  # 设置nginx worker进程的数量，通常设置为CPU核心数

events {
    worker_connections  1024;  # 每个worker进程允许的最大连接数
}

http {
    include       mime.types;  # 引入mime.types文件，定义了文件扩展名与MIME类型的对应关系
    default_type  application/octet-stream;  # 默认的MIME类型

    sendfile        on;  # 开启sendfile指令，提高文件传输效率
    #tcp_nopush     on;  # 开启tcp_nopush指令，提高网络传输性能

    #keepalive_timeout  0;  # 客户端连接保持超时时间，0表示禁用
    keepalive_timeout  65;  # 客户端连接保持超时时间，单位为秒

    #gzip  on;  # 开启gzip压缩

    # HTTPS server
    server {
        listen 443 ssl;  # 监听443端口，并启用SSL

        server_name  localhost;  # 服务器名称

        ssl_certificate      /usr/local/nginx/cert/server.crt;  # SSL证书路径
        ssl_certificate_key  /usr/local/nginx/cert/server.key;  # SSL证书密钥路径

        ssl_session_cache    shared:SSL:1m;  # SSL会话缓存大小
        ssl_session_timeout  5m;  # SSL会话超时时间

        ssl_ciphers  HIGH:!aNULL:!MD5;  # SSL加密算法
        ssl_prefer_server_ciphers  on;  # 优先使用服务器端的SSL加密算法

        location / {
            root   /usr/share/nginx/html/dist;  # 设置静态文件根目录
            try_files $uri $uri/ /index.html;  # 尝试查找文件，如果找不到则返回index.html
            index  index.html index.htm;  # 默认的索引文件
        }

        location /backend/ {
            proxy_set_header Host $http_host;  # 设置代理请求头
            proxy_set_header X-Real-IP $remote_addr;  # 设置代理请求头
            proxy_set_header REMOTE-HOST $remote_addr;  # 设置代理请求头
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 设置代理请求头
            client_max_body_size 20M;  # 设置客户端请求体的最大尺寸
            proxy_send_timeout 500;  # 设置代理发送超时时间
            proxy_read_timeout 480;  # 设置代理读取超时时间
            proxy_pass http://localhost:8992;  # 设置代理转发的目标地址
        }

        error_page   500 502 503 504  /50x.html;  # 设置错误页面
        location = /50x.html {
            root   html;  # 错误页面的根目录
        }
    }
}

打包成docker镜像

运行镜像

容器内部的端口号是443 使用–net=host，就不需要映射端口号了

如果防火墙开着的话，需要放行443和80端口

docker run -d --privileged=true --name tg-web1.0 --restart always --net=host tgws:1.0

• –privileged=true #容器内部拥有root权限
• –restart always #自启动
• –net=host #网络与宿主机保持