打包前端

前端build

在根目录的package.json文件设置build方式

打包完成后会生成dist包，就是上面截图跟docker同级目录的包

在与dist包同级的目录新建docker文件夹，在文件夹下新建nginx.conf文件进行配置

nginx 复制代码

server {
  listen 80;
  listen [::]:80;
  # gzip config
  gzip on;
  gzip_min_length 1k;
  gzip_comp_level 9;
  gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
  gzip_vary on;
  gzip_disable "MSIE [1-6]\.";
  resolver $NAMESERVERS ipv6=off;
  root /usr/share/nginx/html;
  include /etc/nginx/mime.types;
  location / {
    index  index.html;
  }
  .....

}

:::success

listen 80; 和 listen [::]:80;：指定服务器监听80端口，既支持IPv4又支持IPv6连接。
gzip on;：启用gzip压缩以压缩响应内容。
gzip_min_length 1k;：指定压缩响应的最小长度。长度小于此值的响应将不会被压缩。
gzip_comp_level 9;：设置压缩级别为9，这是最高的压缩级别。
gzip_types ...;：指定应该使用gzip压缩的文件类型。
gzip_vary on;：在响应中添加"Vary: Accept-Encoding"头，告诉缓存服务器响应的内容取决于请求中"Accept-Encoding"头的值。
gzip_disable "MSIE [1-6].";：禁用特定版本的Internet Explorer的gzip压缩。
resolver <math xmlns="http://www.w3.org/1998/Math/MathML"> N A M E S E R V E R S i p v 6 = o f f ; ∗ ∗ ：定义用于解析域名的 D N S 服务器。 ∗ ∗ NAMESERVERS ipv6=off;**：定义用于解析域名的DNS服务器。** </math>NAMESERVERSipv6=off;∗∗：定义用于解析域名的DNS服务器。∗∗NAMESERVERS变量应该在Nginx配置的其他地方定义。
root /usr/share/nginx/html; ：设置用于提供文件的根目录。在这种情况下，它设置为 /usr/share/nginx/html。
include /etc/nginx/mime.types;：包含MIME类型文件，该文件将文件扩展名映射到MIME类型。
location / { index index.html; } ：定义了如何处理根URL("/")的请求。在这种情况下，它指定如果请求的URL是"/"，Nginx应该从之前指定的根目录中提供名为index.html的文件。 :::

dockerfile文件

nginx 复制代码

FROM nginx
ADD nginx.conf /etc/nginx/conf.d/default.conf
ADD docker-entrypoint.sh /docker-entrypoint.sh
COPY dist /usr/share/nginx/html
CMD ["sh","/docker-entrypoint.sh"]

:::success

这个Dockerfile的作用是构建一个基于Nginx的Docker镜像，并将一些配置文件和静态资源文件添加到镜像中，最后定义了容器启动时的默认命令。

FROM nginx：从官方的Nginx镜像开始构建。
ADD nginx.conf /etc/nginx/conf.d/default.conf ：将主机上的 nginx.conf 文件添加到镜像中的 /etc/nginx/conf.d/default.conf 。这里假设 nginx.conf 文件是一个Nginx配置文件，用于配置Nginx服务器。
ADD docker-entrypoint.sh /docker-entrypoint.sh ：将主机上的 docker-entrypoint.sh 脚本添加到镜像中的 /docker-entrypoint.sh。这个脚本可能是用于容器启动时的一些初始化操作，比如启动Nginx服务器前的一些配置。
COPY dist /usr/share/nginx/html ：将主机上的 dist 目录中的内容复制到镜像中的 /usr/share/nginx/html 目录。这个目录通常用于存放Nginx服务器要提供的静态资源文件，比如HTML、CSS、JavaScript文件等。
CMD ["sh","/docker-entrypoint.sh"] ：定义容器启动时的默认命令。在这里，它会执行 /docker-entrypoint.sh 脚本，可能是用来启动Nginx服务器或者执行其他初始化操作的脚本。 :::

前端项目进行docker操作

:::info

第一步

yarn build // 打包

cp -rf dist ./docker/ // 将dist拷贝在docker目录下

第二步

cd docker // 进入docker文件夹

docker build -t your server IP . // 这个' . '一定不要忘记

docker push your server IP // 类似git push的操作懂得都懂 :::

Docker部署

docker安装

:::success 参考官方：hub.docker.com/ :::

连接服务器

:::info 用SSH连接 your server :::

部署

:::info sudo docker compose down //停止服务

sudo docker pull your server // 拉取最新软件

sudo docker compose up //启动服务 :::

查看部署是否成功