将项目部署到docker容器上

通过docker部署前后端项目

前置条件

需要在docker中拉去jdk镜像、nginx镜像

docker pull openjdk:17 #拉取openjdk17镜像
docker pull nginx #拉取nginx镜像

部署后端

1.打包后端项目

点击maven插件下面的Lifecycle的package 对后端项目进行打包 等待打包完成即可

2.将打包好的jar包上传到服务器

将打包好的项目jar包直接上传到服务器上面即可

3.配置dockerfile文件

vim dockerfile #vim文本编辑器

FROM openjdk:17 #jdk版本

RUN mkdir /app 

COPY canteen-0.0.1-SNAPSHOT.jar  /app/

CMD java -jar  /app/canteen-0.0.1-SNAPSHOT.jar

EXPOSE 8088 # 暴露端口

4.构建成docker镜像

执行docker build -t 完成镜像构建

docker build -t canteen . # 构建镜像
# 等待构建完成后执行docker查看镜像是否构建成功
docker images #查看镜像

5.运行docker镜像

执行下述命令完成docker命令完成容器启动

docker run -d -p 8088:8088 --restart unless-stopped --name app canteen # -p 端口映射 --restart 设置为开机自启动

如果能看到上诉信息就说明后端项目部署成功

部署前端vue项目

1.打包前端项目

在前端项目执行npm run build对vue项目进行打包

npm run build

等待构建完成后在会出现dist文件夹 dist文件下即为vue项目的依赖和文件

2.上传至阿里云服务器

3.编写default.conf配置文件

在dist同层目录下 vim default.conf 进入vim编辑器完成default.conf的配置

server {
    listen       80;
    server_name  docker_ip_address; # 修改为docker服务宿主机的ip

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }
	
	# 跨域配置
    location /api {
        rewrite ^/api/(.*)$  /$1 break;
        proxy_pass http://backend_server_ip:port/;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

4.编写dockerfile文件

同理通过vim dockerfile 完成dockerfile的配置

vim Dockerfile

FROM nginx
 
MAINTAINER traveler
 
RUN rm /etc/nginx/conf.d/default.conf
 
ADD default.conf /etc/nginx/conf.d/
 
COPY dist/ /usr/share/nginx/html/

5.构建docker镜像

执行docker build 完成镜像的配置

docker build -t webapp . # 构建镜像
# 等待构建完成后执行docker查看镜像是否构建成功
docker images #查看镜像

6.启动镜像容器

启动docker镜像

docker run -p 80:80 -d --name webapp webapp

查看最终效果

到此就完成前后端项目的部署啦