# 2.5 Docker部署nginx和前端项目 ### 1、拉取镜像 \`\`\`powershell docker pull nginx \`\`\` ### 2、启动nginx容器 \`\`\`powershell docker run --restart=always --name=nginx -p 8000:80 -p 443:443 -d nginx \`\`\` -d 后台运行 --name 容器命名 -p 宿主机端口:容器内部端口 ### 3、访问测试 访问地址：http://ip+port 如：http://47.xxx.15.23:8000 ![image-20240411173604527](https://hgh-typora-image.oss-cn-guangzhou.aliyuncs.com/img/image-20240411173604527.png) \*\*云服务器记得开放端口\*\* ### 4、挂载准备 #### 4.1、宿主机创建挂载目录 \`\`\`powershell cd / mkdir -p /docker/nginx \`\`\` 4.2、复制配置文件到宿主机 \`\`\`shell docker cp nginx:/etc/nginx /docker/nginx/conf docker cp nginx:/usr/share/nginx/html /docker/nginx/html docker cp nginx:/var/log/nginx /docker/nginx/logs \`\`\` #### 4.3、创建前端工程挂载目录 该目录的好处在于，上传新的前端项目后，不用重新启动nginx，只需要修改nginx.conf配置 \`\`\`shell mkdir /root/front_server \`\`\` #### 4.4、删除之前建立的nginx \`\`\`shell docker rm -f nginx \`\`\` #### 4.5、挂载启动nginx容器 \`\`\`shell docker run --restart=always --name=nginx -p 8000:80 -p 443:443 -v /docker/nginx/conf:/etc/nginx -v /docker/nginx/html:/usr/share/nginx/html -v /docker/nginx/logs:/var/log/nginx -v /root/front_server:/root/front_server --privileged=true -d nginx \`\`\` !\[image-20240411194500957\](https://hgh-typora-image.oss-cn-guangzhou.aliyuncs.com/img/image-20240411194500957.png) ==注意：== 若ports未显示端口号，则表示容器部署失败，可查看端口号是否被占用或目录路径是否正确或查看Docker容器日志 ### 5. 部署前端项目 #### 5.1 对前端项目进行打包： \`\`\`shell npm run build \`\`\` !\[img\](https://hgh-typora-image.oss-cn-guangzhou.aliyuncs.com/img/7bc03ee035f74c7c94e74d7cffe48df6.png) #### 5.2 把dist包传入/root/front_server !\[image-20240412231015342\](https://hgh-typora-image.oss-cn-guangzhou.aliyuncs.com/img/image-20240412231015342.png) #### 5.3 拷贝前端文件： \`\`\`shell cp /docker/nginx/html/index.html /root/front_server/ \`\`\` #### 5.3 创建并修改default.conf文件： \`\`\`shell vim /docker/nginx/conf/conf.d/default.conf \`\`\` 修改的default.conf内容如下： \`\`\`shell location / { alias /root/front_server; index index.html index.htm; } \`\`\` 该配置文件定义了首页的指向为 \`/usr/share/nginx/html\`, 把构建出来的index.html文件和相关的静态资源放到\`/usr/share/nginx/html\`目录下。 \> 参考：https://blog.csdn.net/zhuocailing3390/article/details/121778137 \> \> ## 方法2 #### 5.4 在项目文件夹下编写Dockerfile文件 \`\`\`shell vim /root/front_server/Dockerfile \`\`\` Dockerfile内容如下： \`\`\`shell FROM nginx MAINTAINER hgh RUN rm /etc/nginx/conf.d/default.conf ADD default.conf /etc/nginx/conf.d/ COPY dist/ /usr/share/nginx/html/ \`\`\` \> FROM nginx：该镜像是基于nginx:latest镜像构建的 \> \> MAINTAINER hgh：添加说明 \> \> RUN rm /etc/nginx/conf.d/default.conf：删除目录下的default.conf文件 \> \> ADD default.conf /etc/nginx/conf.d/：将default.conf复制到/etc/nginx/conf.d/下，用本地的default.conf配置来替换nginx镜像里的默认配置 \> \> COPY dist/ /usr/share/nginx/html/：将项目根目录下dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下 #### 5.3 创建并修改default.conf文件： \`\`\`shell vim /root/front_server/default.conf \`\`\` 修改的nginx.conf内容如下： \`\`\`shell worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/json; sendfile on; keepalive_timeout 65; server { listen 9090; # 指定前端项目所在的位置 location /front { root /usr/share/nginx/tcm-ui/tcm-front; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } location /api { rewrite /api/(.\*) /$1 break; proxy_pass http://tcm:8888; } } server { listen 9091; # 指定前端项目所在的位置 location /back { root /usr/share/nginx/tcm-ui/tcm-back; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } location /api { rewrite /api/(.\*) /$1 break; proxy_pass http://tcm:8880; } } } \`\`\` 注意：default.conf、dist、Dockerfile三个文件保持在同一目录 #### 5.5 在当前目录下构建docker镜像： \`\`\`shell docker build -t tcm-front . \`\`\` \> -t tcm-front: 自定义镜像名 \> \> "."(点) 基于当前目录的Dockerfile来构建镜像 #### 5.6 查看镜像 \`\`\`shell docker images \| grep tcm-front \`\`\` #### 5.7启动容器 \`\`\`shell docker run --restart=always -d -p 9090:80 --name tcm-front tcm-front \`\`\` #### 5.8 查看启动的容器 \`\`\`undefined docker ps \`\`\` #### 5.9访问 ip+端口号 ##### 注意注意：一定要在服务器上开放端口号的安全组 https://b11et3un53m.feishu.cn/wiki/MWQIw4Zvhil0I5ktPHwcoqZdnec