Docker部署前后端项目

2022-03-15 本文已影响0人 LCF_全博

一.安装docker

1.Cento安装docker

安装命令

curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

2.Docker开启远程访问权限

#修改Docker服务文件，需要先切换到root用户
vim /lib/systemd/system/docker.service
#注释掉"ExecStart"这一行，并添加下面这一行信息
ExecStart=/usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock -H tcp://0.0.0.0:2375

修改完成之后重新加载环境配置变量

#重新加载配置文件
systemctl daemon-reload
#重启服务
systemctl restart docker.service
#查看配置的端口号（2375）是否开启（非必要）
netstat -nlpt  #如果找不到netstat命令，可以先安装一下这个工具，具体百度

效果如下，默认开启的是2375端口

Untitled.png

二.docker部署ods前端项目

💡 思路：将vite项目构建成dist文件，这里面的都是静态文件。docker拉取一个nginx镜像，然后将默认路径指向dist里的内容，即可访问页面资源。然后将配置nginx代理后端路径即可

1.安装nginx

docker pull nginx

2.vite代理与nginx代理

vite.config配置
server: {
    port: 9090,
    cors: true, // 默认启用并允许任何源
    open: true, // 在服务器启动时自动在浏览器中打开应用程序
    //反向代理配置，注意rewrite写法
    proxy: {
      "/api": {
        target: "http://xx.xx.xx.x1:8090", //代理接口
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, "api"),
      },
      "/web": {
        target: "http://xx.xx.xx.x2:8090", //代理接口
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/web/, "web"),
      },
    },
  },
 
 
nginx配置：
location ^~ /api/ {
    proxy_pass http://xx.xx.xx.x1:8090/api/;  # 转发地址
}
        
location ^~ /web/ {
    proxy_pass http://xx.xx.xx.x2:8090/web/;  # 转发地址
}

3.将vite项目打包成dist文件

我们的目标就是将项目构建成一个静态资源目录。然后发布到nginx上访问

执行命令

pnpm build

4.设置nginx配置文件

nginx.conf配置文件如下

worker_processes  1;

events {
    worker_connections  1024;  #每个工作进程的最大连接数量
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;   #指令指定 nginx 是否调用sendfile 函数（zero copy 方式）来输出文件，对于普通应用，必须设为on。
    keepalive_timeout  65;   #超时时间
    
    server {
        listen       80;  #监听端口
        server_name  localhost, 127.0.0.1;  #配置访问域名

        location / {
             root   /usr/share/nginx/html;  #设置需要访问的静态资源
             index  index.html index.htm;
             try_files $uri $uri/ /index.html;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        # 设置后端服务器信息
        location ^~ /dev/ {
            proxy_set_header Host $host;
            proxy_set_header  X-Real-IP        $remote_addr;
            proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;  #以上三行，目的是将代理服务器收到的用户的信息传到真实服务器上
            proxy_set_header X-NginX-Proxy true;
            proxy_pass http://172.17.0.2:80/; #后端地址应用容器地址
        }
    }
}

5.创建Dockerfile文件

通过Dockerfile下载nginx镜像，然后把我们的vue静态资源添加到nginx镜像的特定目录，用我们设置好的nginx配置文件覆盖默认的配置文件，最后打包成一个新的镜像发布启动。

# 下载nginx镜像
FROM nginx

# 镜像作者（可忽略）
MAINTAINER quanbo

# 将前端项目打包的dist文件全部拷贝到/usr/share/nginx/html/文件下
COPY dist/ /usr/share/nginx/html/

#用nginx.conf覆盖默认的nginx.conf文件
COPY nginx.conf /etc/nginx/nginx.conf

# 添加完成标记(可省略)
RUN echo 'echo init ok!!'

6.webstom配置docker启动设置

目的是根据Dockerfile文件中的内容构建成一个新的镜像发布到服务器中，然后运行创建一个新的容器

截屏2022-03-15_14.44.02.png

三.docker部署ods后端项目

💡 思路：将项目构建成一个jar包，下载一个java8的镜像，然后将jar放进镜像中，将jar启动起来，暴露响应端口。另外再启一个redis容器。配合使用即可

1.将后端项目打包成jar包

在后端项目中执行一下命令

mvn clean package

2.创建Dockerfile文件

# 下载java8镜像
FROM java:8

# 设置作者
MAINTAINER quanbo

# 设置环境语言
ENV LANG=C.UTF-8 LC_ALL=C.UTF-8

# 将后端的jar包添加进镜像中
ADD ods-info/target/ods-info-0.0.1-SNAPSHOT.jar app.jar

# 设置jar启动命令
ENTRYPOINT ["java","-jar","/app.jar"]

#暴露端口
EXPOSE 80

# 设置docker内部时区
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone

3.idea中配置docker启动设置