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

docker部署若依项目

使用docker部署至服务器

---

---

前言

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

---

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

一、环境

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

1.1 安装docker

教程：链接: linux安装docker.

1.2 安装jdk

教程：链接: linux安装jdk.

1.3 安装mysql

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

1.3.1测试连接

1.3.2 连接失败？

查看启动的端口号是否开放了防火墙,后续主要是关于端口相关，都应该注意这个防火墙

1.3.3 插入数据

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

1.4 安装redis

教程：链接: linux安装redis.

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

二、项目打包

2.1 后端

对于多模块的项目，要对因为子模块依赖于父模块，所以对父模块进行打包

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

3.1.4 校验是否启动成功

好了，后端这一块没问题了，接下来是前端部分

3.2 部署前端

3.2.1 安装Ngnix

安装教程可以参考这位小伙伴的：这里写的挺详细的: 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地址加端口号即可访问！

总结

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