docker从0到1部署前后端分离项目

小咪咪 2023-10-01 17:44 14阅读 0赞

## docker部署若依项目 ##

使用docker部署至服务器

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

#### 文章目录 ####

*  docker部署若依项目
 *  前言
 *  一、环境
 *   *  1.1 安装docker
     *  1.2 安装jdk
     *  1.3 安装mysql
     *   *  1.3.1测试连接
         *  1.3.2 连接失败？
         *  1.3.3 插入数据
     *  1.4 安装redis
 *  二、项目打包
 *   *  2.1 后端
     *  2.2 前端
 *  三、项目部署
 *   *  3.1 部署后端
     *   *  3.1.1 jar包做成dockerFile
         *  3.1.2 dockerFile做成docker镜像
         *  3.1.3 运行dockerFile
         *  3.1.4 校验是否启动成功
     *  3.2 部署前端
     *   *  3.2.1 安装Ngnix
         *   *  3.2.1.1 配置ng
             *  3.2.1.2 启动ng
     *  四 访问项目
 *  总结

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

## 前言 ##

为了让自己更加熟悉docker，以及提升部署能力，花时间部署了项目，并且记录下来，把项目部署从0到1实现，项目示例用的是开源框架ruoyi

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

提示：以下是本篇文章正文内容，下面案例可供参考

## 一、环境 ##

首先先准备好服务器，我这边使用的是腾讯云的服务器，花74买了一年；然后开始安装环境，这边我整理了优质、通俗易懂的安装步骤

### 1.1 安装docker ###

教程：链接: [linux安装docker][linux_docker].

### 1.2 安装jdk ###

教程：链接: [linux安装jdk][linux_jdk].

### 1.3 安装mysql ###

教程：链接: [linux安装mysql][linux_mysql].  
安装完成后设置好密码，启动docker里的mysql，然后在本地使用数据库可视化工具测试连接

#### 1.3.1测试连接 ####

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16]

#### 1.3.2 连接失败？ ####

查看启动的端口号是否开放了防火墙,后续主要是关于端口相关，都应该注意这个防火墙  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 1]

#### 1.3.3 插入数据 ####

把项目的sql文件通过可视化工具去插入

### 1.4 安装redis ###

教程：链接: [linux安装redis][linux_redis].

有这几个环境应该够了，因为是springboot的项目所以不需要安装tomcat;

## 二、项目打包 ##

### 2.1 后端 ###

对于多模块的项目，要对因为子模块依赖于父模块，所以对父模块进行打包  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 2]

### 2.2 前端 ###

npm run build:prod

打包好后会得到一个dist文件夹；

`至此，所有的准备工作都弄好了，接下来是关键，也容易忽略细节的部分`

## 三、项目部署 ##

这一块，我们先从后端入手，将后端部署完后，尝试着访问一下，如果通了就可以弄前端部分了；

### 3.1 部署后端 ###

#### 3.1.1 jar包做成dockerFile ####

将jar包与dockerFile文件放同一目录，然后使用以下命令

vi Dockerfile
    # 文件内容
    FROM java:8
    
    ARG JAR_FILE=./*.jar
    COPY ${JAR_FILE} ruoyi.jar
    ENV TZ=Asia/Shanghai
    ENTRYPOINT ["java","-jar","ruoyi.jar"]

#### 3.1.2 dockerFile做成docker镜像 ####

创建好Dockerfile文件之后，执行命令 构建镜像： -t后面为自定义镜像名称

docker build -f Dockerfile -t ruoyi:v1.0.0

#### 3.1.3 运行dockerFile ####

docker run -d -p 8080:8080 ruoyi:v1.0.0

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 3]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 4]

#### 3.1.4 校验是否启动成功 ####

![在这里插入图片描述][f1a0b9b4660d490296c810234a37122d.png]  
好了，后端这一块没问题了，接下来是前端部分

### 3.2 部署前端 ###

#### 3.2.1 安装Ngnix ####

安装教程可以参考这位小伙伴的：这里写的挺详细的: [docker部署nginx并且挂载文件夹和文件][docker_nginx].  
`千万要记得挂载文件哦！`我就是在这卡了很久，以为自己做的配置文件有问题，实际上是没挂载进去；  
我这边是做法如下：

##### 3.2.1.1 配置ng #####

在linux系统中创建挂载源文件和文件夹

mkdir -p /data/nginx/conf
    mkdir -p /data/nginx/conf.d
    mkdir -p /data/nginx/html
    mkdir -p /data/nginx/logs

然后创建在conf文件夹里面创建一个nginx.conf配置文件,记得dist文件路径一定要对哦

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;
    		charset utf-8;
    
    		location / {
                root  /usr/share/nginx/html/ruoyiadmin/dist;
                try_files $uri $uri/ /index.html;
                index  index.html index.htm;
            }
    		
    		location /prod-api/ {
    			proxy_set_header Host $http_host;
    			proxy_set_header X-Real-IP $remote_addr;
    			proxy_set_header REMOTE-HOST $remote_addr;
    			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    			proxy_pass http://1.117.***.7:8080/;
    		}
    
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
        }
    }

##### 3.2.1.2 启动ng #####

docker run  --name mynginx -d -p 80:80 -v /data/nginx/html:/usr/share/nginx/html -v /data/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /data/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf  -v /data/nginx/logs:/var/log/nginx nginx

### 四 访问项目 ###

http://1.117.\*\*\*.7:80/，直接在浏览器输入你服务器的ip地址加端口号即可访问！  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 5]

## 总结 ##

以上就是我个人部署项目的全部过程和一些经验，平时工作都是很枯燥的编写代码，而让一个项目从0到1的部署起来，经历了大大小小的磕碰，到最后访问出现页面的那一刻，是很欣慰和激动的！加油，奥利给！

[linux_docker]: https://www.cnblogs.com/aimei/p/12192804.html/
[linux_jdk]: https://blog.csdn.net/u013617982/article/details/104302741/
[linux_mysql]: https://www.runoob.com/docker/docker-install-mysql.html/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/9ad69026b5964fe8a7588891cbcc5f2a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg6aKc56WWNjI0Ng==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/e22cdbe582f14843951d5030c775457d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg6aKc56WWNjI0Ng==,size_20,color_FFFFFF,t_70,g_se,x_16
[linux_redis]: https://www.runoob.com/docker/docker-install-redis.html/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/624adecd7ea648198c68a392994912e6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg6aKc56WWNjI0Ng==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/5ef19d2f96cf4d36817305807a5cf015.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg6aKc56WWNjI0Ng==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/00710975fe4447ef99158532f5174478.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg6aKc56WWNjI0Ng==,size_20,color_FFFFFF,t_70,g_se,x_16
[f1a0b9b4660d490296c810234a37122d.png]: https://img-blog.csdnimg.cn/f1a0b9b4660d490296c810234a37122d.png
[docker_nginx]: https://blog.csdn.net/qq_26614295/article/details/80505246
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5peg6aKc56WWNjI0Ng_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/a542625a2c204ab5979810dcbec30a03.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5peg6aKc56WWNjI0Ng==,size_20,color_FFFFFF,t_70,g_se,x_16