手把手教你Docker部署若依项目（前端服务）_docker ui搭建服务器

手把手教你Docker部署若依项目（前端服务）

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

一、 往常部署

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

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

ok，我们就基于这个流程来将我们的前端项目做成docker镜像

二、制作docker镜像

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

1.打包ruoyi-ui文件

下载若依项目，然后进入到ruoyi-ui这个工程，根据文档使用 npm run build:prod打包项目

2.创建目录，并上传

mkdir /ruoyi/docker-nginx -p
1

目录如下：

├── default.conf #nginx配置
├── dist # ruoyi-ui打包文件
└── Dockerfile
1
2
3

3.Nginx配置文件编写

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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4.Dockerfile文件编写

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;"
1
2
3
4
5
6
7
8
9
10
11
12

5.构建测试

docker build -t ruoyiweb .
docker run -p 8088:80 --name ruoyi-web ruoyiweb
1
2

访问ip+8088，如下表示成功：

6.问题？

我们发现页面可以访问，但是接口不通，这是因为我们后端还没有部署，如果我们仅仅是简单的 将后端服务打成jar包，然后java -jar 启动，这也是不可行的，因为nginx的配置中，转发的是 127.0.0.1 这个ip，也就是nginx容器内部的，但是我们的jar包是在容器外部的，这时候我们通过docker-compose很容易解决这个问题，我接下来我们部署后端项目，具体链接我放到下面。

相关链接

• 别不信，若依项目只需一个yml文件即可部署
• 手把手教你Docker部署若依项目（后端服务）
• 手把手教你Docker部署若依项目（整合）
• 若依前后分离Git地址
• 狂神讲docker地址