使用docker部署springboot、Vue分离项目,部署到主路径

这几天写了一个小的应用,牵涉到了使用docker部署问题,中间遇到了一些小问题,此处记录下,为以后遇到类似的问题提供一些解决思路。
1、准备使用的镜像:mysql、redis、nginx、jdk。
镜像地址:

docker pull swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/nginx:1.27.3
docker pull swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/vulhub/java:8u261-jdk
docker pull swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/mysql:8.0.39
docker pull swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/redis:6.2.7

具体的mysql、redis的安装不再赘述,见其他相关文章:
常用docker应用部署

2、打包后端的代码为jar文件文件名为:

QualityChecker-0.0.1-SNAPSHOT.jar

3、后端创建镜像及运行:
Dockerfile

FROM swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/vulhub/java:8u261-jdk
RUN mkdir /app
COPY ./QualityChecker-0.0.1-SNAPSHOT.jar /app
RUN export JAVA_HOME=/opt/java
RUN export PATH=.:$PATH:/opt/java/bin
ENV   PATH=/opt/java/bin:$PATH
ENTRYPOINT ["java","-jar","/app/QualityChecker-0.0.1-SNAPSHOT.jar"]

镜像创建:

docker build -t qualitychecker-api:0.1 .

运行:

docker run -p 8086:8086 -d --name web-api qualitychecker-api:0.1

通过地址即可访问,http://ip:8086。
4、前端编译:
yarn的话一般来用:

yarn build

可能需要修改的内容,在工程中的vite.config.js中:
export default defineConfig({
中可能需要增加:

  base: '/', // Add this line for relative paths

之后会得到dist目录,一般来讲就可以把dist进行打包,上传到服务器或者docker所在的服务器,如我这里上传到/myweb/src/QualityChecker
5、前端打包:
可以将dist解包后,放入/myweb/src/QualityChecker中。
因为我想将前端放到web服务器的根路径下,所以用如下的方法:

nginx.conf的内容如下:

# 全局配置块
worker_processes 4;
# 事件配置块
events {
    worker_connections 1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    access_log /var/log/nginx/access.log;
    server {
        listen       80;
        server_name  localhost;
     
        location / {
            root   /var/www/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
     
        location /api/ {
            proxy_read_timeout 100s;
            proxy_pass http://172.20.94.32:8086/;
            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-Forwarded-Proto $scheme;
        }  
    }
}

注意:
①172那个地址是我的后端地址。
②/api/和http://172.20.94.32:8086/必须同时使用。
http://172.20.94.32:8086/此处的/代表,要将原始请求的如172.20.94.32:8081/api/user/login改写为172.20.94.32:8086/user/login,也就是要把从最前面开始的地址/api去掉。如果8086/如果不加/,则会原样的转发,反之则会进行截断和替换。

创建Dockerfile

FROM swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/nginx:1.27.3-alpine
RUN mkdir -p /myweb/wwwroot
COPY ./dist/ /var/www/html/
COPY ./nginx.conf /etc/nginx/nginx.conf

打包镜像:

docker build -t qualitychecker:0.1 .

运行镜像:

docker run -d -p 8081:80 --name web qualitychecker:0.1

当然要实现自动启动,则要加上参数:

--restart=always

完整的就是:

docker run -d -p 8081:80 --name --restart=always web qualitychecker:0.1

即可。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lwprain

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值