基于docker部署前后端分离项目(前段是Vue项目)

          本来是略懂一点Linux操作跟docker容器的,但是公司分配给我部署项目的工作,所以自己在网上查询了一些关于部署的知识,简单总结一下!

## 目前的环境是已经安装了docker服务的, 直接开始部署

(一) : 后端部署

1) : 本地的项目打成jar包 (这个不用讲估计都是知道的)

 然后找到jar包的位置并复制到桌面备用;

2) : 然后再Linux虚拟机的根目录创建一个文件夹ruoyi  (我这里用的是若依框架二次开的, 所以名字就叫若以,这个是自定义的,根据心情)

 3) : 进入到ruoyi这个目录里面, 需要准备一些东西

首先第一个是Dockerfile文件, 直接vim 创建一个Dockerfile文件并编辑内容 (文件内容先展示出来, 每个都是什么意思我也不太清楚,因为公司部署任务比较着急, 所以我就先用, 这个可以以后慢慢去了解) 内容为:

FROM java:8

VOLUME /tmp

EXPOSE 8080

ADD ruoyi-admin.jar /ruoyi.jar

ENTRYPOINT ["java","-jar","/ruoyi.jar"]

## 注意一点 

EXPOSE 8080 

# 这句话的意思就是 向外暴露端口为8080 后面前段部署的话会用到这个端口

ADD ruoyi-admin.jar /ruoyi.jar

# ruoyi-admin.jar 这个是我项目打成jar包的名字, ruoyi.jar 这个是我想要打成镜像的镜像名字 ...这句话的意思就是  把当前名为ruoyi-admin.jar的jar包打成名为 ruoyi.jar的镜像. 当然前者是必须跟你的jar包保持一致的 后者是你可以自定义的,但是必须以.jar为后缀

ENTRYPOINT ["java","-jar","/ruoyi.jar"]

# 这句话的大致意思就是添加指令, 最后的/ruoyi.jar 必须以上面自定义的名字为准.

4) : 把刚才打包好的jar包上传到虚拟机 并移动到ruoyi文件夹里面, 这样就算完成了!

5) :  接下来也就是最重要的部分, 创建镜像并启动镜像

还是在/ruoyi目录下 输入指令

docker build -t ruoyi:v1.0 .

其中 ruoyi是你自定义的名字, 也就是镜像的名字 后面的:v1.0 是指定的镜像版本 若不写 则默认为:laster 最新版本   

切记切记!!!!!!!!!!! 后面还有一个空格符号 然后才是 "."

 看到这些之后 就代表镜像已经做好了 , 接下来使用

docker images 来查看一下镜像文件

docker images

 这个就是我们做好的镜像文件了

6) : 接下来我们启动镜像

docker run -id -p 8080:8080  --name ruoyi ruoyi:v1.0

 --name 是用来给创建的容器起名字的  后面的ruoyi:v1.0 是刚才创建的镜像的名字 意思就是使用ruoyi:v1.0这个镜像来创建一个叫ruoyi的容器

当出现这一串的时候 就代表启动好了 接下来就可以用 docker ps 指令 来查看一下正在运行的容器了 (由于我没有改配置 我这里就不展示启动成功的图了)

 ### 小知识

如果要经常部署 或者改动项目配置的话 感觉输入指令比较麻烦 这里有一个小办法

你可以在/ruoyi的目录下面vim jingxiang.sh  创建这样一个文件 内容为

这样的话 下次启动的话 直接 输入指令 sh jingxiang.sh  他就会创建镜像了

同理 启动容器的话 是这样子的

 我这里之所以多了一个-v /doc/lic/:/doc/lic/ 是因为我的项目需要一个目录来读取授权文件

所以我是用-v 挂在了一下. 如若你的项目不需要的话 就不用使用-v 这个

(二) : 前端部署

前端的话 我们这边是Vue, 不要问为什么我要部署前段, 因为公司没运维! ! ! 废话不多说 直接开搞

1) : 第一步呢 老样子 还是先打包, 

 选择前段项目, 然后在控制台打开  输入指令 

npm run build:prod

 看到这些的时候 就说明已经打包好了 . 

在看项目目录 会发现有一个dist的文件夹(第一步截图的时候我已经打包好了, 所以那里也有一个, 本来是不应该有的)

 然后就

打开文件所在的目录 并复制到桌面 然后添加为压缩包 方便上传

2) : Linux 虚拟机根目录创建文件夹vueruoyi            (根据个人习惯创建 方便管理)

3) : 将前端资源dist上传到vueruoyi文件夹下

4) : 在vueruoyi文件夹下创建default.conf文件  

指令:

vim default.conf

文件内容如下

​
server {

    listen  80;

    listen  [::]:80;

    server_name  localhost;

    location / {

        root   /usr/share/nginx/html;

        index  index.html index.htm;

try_files $uri $uri/ /index.html;    # 这句一定要加 不然会刷新的时候报404

    }

    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://192.168.31.116:8080/;#这里一定要换成你要部署的服务器的地 # 址

  }

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {

        root   /usr/share/nginx/html;

    }

}

​

5) :  在vueruoyi文件夹下创建Dockerfile文件  

 指令:

 vim Dockerfile    

文件内容如下 (复制的时候一定删除#以及后面的内容)

FROM nginx     # 这里指定的是基于nginx如果没有安装nginx会自动安装最新版本

COPY  dist/   /usr/share/nginx/html/  # 这里是路径, 把当前目录下的dist文件拷贝到容器的/usr/share/nginx/html/路径下									  

RUN chmod -R 755 /usr/share/nginx/html   # 这个是添加权限 有可能会出现权限问题导致nginx部署异常								

COPY  default.conf  /etc/nginx/conf.d/default.conf  # 这里是路径的映射,同第一条

6) : 然后创建两个脚本方便运行以及部署

jingxiang.sh   这个是为了将资源打包成镜像的

指令: 

vim jingxiang.sh

内容

 docker build -t vue-docker:v1.0 .      

#vue-docker是打包成镜像的名字:v1.0 是镜像的版本   最后还有个 . 千万不要忘记了

run.sh  这个是为了将镜像运行起来的

指令: 

vim run.sh

内容:

docker run -id -p 100:80 --name vueruoyi vue-docker:v1.0

7) : 做完这些工作就完成了  全部的结构是这个样子的

运行的话 输入指令 :

sh jingxiang.sh

这就是运行成功了,

然后查看docker镜像  输入指令

docker images

就会发现 创建的镜像出现了

 8) : 开启容器并运行 指令 :

sh run.sh

这就代表运行成功了 输入指令

docker ps

 就可以看到当前正在运行的容器了

输入

docker ps -a 

就可以看到所有的容器

 查看容器的日志指令

docker logs vueruoyi

 大功告成!!