自学内容网 自学内容网
自学内容网 > 正文

前端用docker部署

🕗 发布于 2024-11-08 06:21 前端  docker  容器  前端部署教程  docker部署  

1、环境检查

首先需要确认服务器上是否已经安装docker了。
在服务器上执行docker -v
在这里插入图片描述
显示对应的版本号说明已经安装好了docker

2、部署

使用Docker部署若依项目的前端服务，我们最终实现的是：启动一个镜像，我们的整个前端就启动了，想要修改nginx配置，直接挂载下目录修改即可。

2.1传统部署方法

如果我们不用docker部署，我们会怎样部署前端项目呢？

  • 项目打成dist文件
  • 上传服务器
  • 下载nginx（docker下载或者压缩包安装）
  • 配置nginx的端口转发

感觉好麻烦，这里将使用docker进行部署，打成一个镜像包：

2.2制作镜像

我们的前端项目是利用nginx启动的，所以我们先将前端这个项目打包成dist文件，上传到服务器，然后编写dockerfile以及nginx配置文件，将dist文件和nginx配置文件copy到容器内部。最后打包测试。

2.1.1打包ruoyi-ui文件

下载若依项目，然后进入到ruoyi-ui这个工程，根据文档使用 npm run build:prod打包项目
在这里插入图片描述
这里最终会出现一个dist文件
在这里插入图片描述

2.1.2服务器上创建目录

mkdir /ruoyi/docker-nginx -p
相对应的目录如下：

├── default.conf #nginx配置
├── dist # ruoyi-ui打包文件
└── Dockerfile
2.1.3Nginx配置文件编写

使用vim创建一个 default.conf 文件
nginx配置文件：主要配置域名和端口转发，点我查看文档，内容如下：

server {
    listen       80;
    server_name  localhost;

    location / {
            root   /data/dist;
            index  index.html index.htm;
                 try_files $uri $uri/ /index.html;
    }

   location /prod-api/ {
      proxy_pass  http://127.0.0.1:8080/; # 转发规则 修改你服务器上的后端地址
      proxy_set_header Host $proxy_host; # 修改转发请求头，让8080端口的应用可以受到真实的请求
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}
2.1.4Dockerfile文件编写
FROM nginx
MAINTAINER xiuyi/kid0510z@163.com
ENV RUN_USER nginx
ENV RUN_GROUP nginx
ENV DATA_DIR /data/dist
ENV LOG_DIR /data/log/nginx
RUN mkdir /data/log/nginx -p
RUN chown nginx.nginx -R /data/log/nginx
ADD dist /data/dist
ADD default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
ENTRYPOINT nginx -g "daemon off;"

3.构建测试

docker build -t ruoyi-vue .
docker run -p 8088:80 --name ruoyi-vue ruoyi-vue

4.验证

访问ip+8088，如下表示成功：
在这里插入图片描述

5.完结

注意：如果使用的是docker部署的nginx ，应该先把nginx 进行关闭！！！！！
在这里插入图片描述


原文地址：https://blog.csdn.net/sunyingboaini/article/details/143478341

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024