Docker+nginx部署Springboot+vue前后端分离项目（Linux版）

末蓝、 2024-04-08 09:13 43阅读 0赞

### 1、安装docker ###

\#安装

yum install docker

\#检验安装是否成功

docker --version

\#启动

systemctl start docker

### 2、安装docker compose ###

sudo curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
    sudo chmod +x /usr/local/bin/docker-compose

\#检查是否安装成功

docker-compose --version

### 3、编写Dockerfile文件 ###

我们的项目需要成为docker的镜像，所以我们必须先编写Dockerfile文件构建我们的项目镜像然后进行编排，Dockerfile文件可以帮我们进行构建。

# 依赖jdk8环境
    FROM java:8
    
    # 对外暴露8080
    EXPOSE 8080
    # 复制vueblog-0.0.1-SNAPSHOT.jar到docker容器中并命名为app.jar
    ADD vueblog-0.0.1-SNAPSHOT.jar app.jar
    # 执行命令
    RUN bash -c 'touch /app.jar'
    ENTRYPOINT ["java", "-jar", "/app.jar", "--spring.profiles.active=pro"]

![在这里插入图片描述][94c9da0efd9c42e4b5542d90f52d8913.png]

### 4、编写docker-compose.yml文件 ###

version: "3"
    services:
    	nginx: # 服务名称，用户自定义
    	  image: nginx:latest  # 镜像版本
    	  ports:
    	  - 80:80  # 暴露端口
    	  volumes: # 挂载
    	  - /root/nginx/html:/usr/share/nginx/html
    	  - /root/nginx/nginx.conf:/etc/nginx/nginx.conf
    	  privileged: true # 这个必须要，解决nginx的文件调用的权限问题
    	mysql:
    	  image: mysql:5.7.27
    	  ports:
    	  - 3306:3306
    	  environment: # 指定用户root的密码
    	    - MYSQL_ROOT_PASSWORD=admin
    	redis:
    	  image: redis:latest
    	vueblog:
    	  image: vueblog:latest
    	  build: . # 表示以当前目录下的Dockerfile开始构建镜像
    	  ports:
    	  - 8081:8081
    	  depends_on: # 依赖与mysql、redis，其实可以不填，默认已经表示可以
    	    - mysql
    	    - redis

![在这里插入图片描述][e29367310f174a27a63b8b2590b801f9.png]

### 5、修改application-pro.yml ###

配置文件中的MySQL和Redis使用docker-compose.yml文件中的  
![在这里插入图片描述][9d6aa2ef883648e4b7a42e9068e76fef.png]

### 6、创建html目录和nginx.conf文件 ###

宿主机的挂载目录：/root/nginx/html  
挂载配置：/root/nginx/nginx.conf  
![在这里插入图片描述][7db2ff94700d41bd9162e4cefc0bf453.png]

nginx.conf文件

#user  root;
    worker_processes  1;
    events {
      worker_connections  1024;
    }
    http {
      include       mime.types;
      default_type  application/octet-stream;
      sendfile        on;
      keepalive_timeout  65;
      server {
          listen       80;
          server_name  localhost;
          location / {
              root   /usr/share/nginx/html;
              try_files $uri $uri/ /index.html last; 
              index  index.html index.htm;
          }
          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
              root   html;
          }
      }
    }

### 7、打包vue代码，上传到html目录下 ###

##### 7.1、修改访问后端的路径 #####

![在这里插入图片描述][59eca88e738a4ab8898c253ae81b57cf.png]

##### 7.2、 打包 #####

npm run build

![在这里插入图片描述][5e0e2865469c4bce84acf9632ff39ede.png]

##### 7.3、将打包好的dist目录下的文件上传到服务器html目录下 #####

![在这里插入图片描述][93468998de754435b654cc6ca49c91af.png]

### 8、打包后端springboot项目 ###

![在这里插入图片描述][68635017e52f4ce49471daa79d26e2c9.png]

### 9、将打包的项目，dockerfile文件，docker-compose文件长传到同一个目录下 ###

![在这里插入图片描述][74d98d11388849b0a3676f5386abf1e3.png]

### 10、启动服务 ###

docker-compose up -d

![在这里插入图片描述][0bd4121ddc874f5794ad2cd978b4826d.png]

### 11、连接远程数据库，更新相关的表 ###

![在这里插入图片描述][e3e96159949d4f5ba85b0962fd4f05df.png]

结束！！

--------------------

有一个可以想念的人，就是幸福。

[94c9da0efd9c42e4b5542d90f52d8913.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/2df37cfe21c043508837c6ca1b202d84.png
[e29367310f174a27a63b8b2590b801f9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/92279f8974734871a2f803f50914c83e.png
[9d6aa2ef883648e4b7a42e9068e76fef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/ae686d49e47e4f1cba7848a6c26023aa.png
[7db2ff94700d41bd9162e4cefc0bf453.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/566a948f59004e6bb8f75b4edebe2a9e.png
[59eca88e738a4ab8898c253ae81b57cf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/bf990fa83a8743f88c1119f0bd34d45a.png
[5e0e2865469c4bce84acf9632ff39ede.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/e60b3603ed724361a2a11b3dc34b77c6.png
[93468998de754435b654cc6ca49c91af.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/d849c01fda23450eb4851551d4f872e0.png
[68635017e52f4ce49471daa79d26e2c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/319477657ff64dee832f59a4442c1a04.png
[74d98d11388849b0a3676f5386abf1e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/88f06d4230cf4c68be43708d3daac8c1.png
[0bd4121ddc874f5794ad2cd978b4826d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/1d0719ea908c4bf0b2eb3c3c5c58fdbc.png
[e3e96159949d4f5ba85b0962fd4f05df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/85b7a4ed8db44c469e6db8a2b9f9520a.png