Docker部署若依项目(前端服务)

文章目录
Docker部署若依项目(前端服务)

目录

一、 往常部署

二、制作docker镜像

1.打包ruoyi-ui文件

2.创建目录,并上传

3.Nginx配置文件编写

4.Dockerfile文件编写

5.构建测试


一、 往常部署

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

项目打成dist文件
上传服务器
下载nginx(docker下载或者压缩包安装)
配置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

目录如下:

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


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;
    }
}

 


4.Dockerfile文件编写


FROM nginx
MAINTAINER [email protected]
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

RUN chmod 775 /data    ##增加权限配置

RUN chmod 775 /data/dist

RUN chmod 775 /data/dist/html

RUN chmod 775 /data/dist/static
ADD default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
ENTRYPOINT nginx -g "daemon off;"

5.下载离线nginx镜像

docker导入nginx镜像

docker load -i docker_nginx1.15.tar.gz


6.构建测试


docker build -t ruoyiweb .
docker run -p 8088:80 --name ruoyi-web ruoyiweb
访问ip+8088,如下表示成功:

 

Docker部署若依项目(前端服务)_第1张图片
————————————————

原文链接:https://blog.csdn.net/m0_46698142/article/details/114888892

你可能感兴趣的:(docker,docker,前端,运维)