前后端分离项目线上部署

Linux部署流程

安装docker，docker-compose——编写dockerfile——编写doker-compose——将dist解压到html目录下——编写Nginx.conf——将dockerfile、doker-compose和jar包上传到root目录下——安装docker-compose——输入docker-compose up -d进行编排

(1) 安装docker

#安装
yum install docker
#检验安装是否成功
[root@localhost opt]# docker --version
Docker version 1.13.1, build 7f2769b/1.13.1
#启动
systemctl start docker

(2) 安装docker compose

可以参考：https://docs.docker.com/compose/install/

【注意】这里不要忘记给权限
【出现问题】首页可以，刷新或者其他地方就是404。这是由于docker-compose 调用的时候nginx的配置文件没有起作用（权限的问题）
【解决办法】如下，重新安装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) 编写docker-compose.yml

version: '3'

services:
  nginx: #服务名称
    image: nginx:latest
    ports:
    - 80:80
    volumes: #映射
    - /root/SIAL-LAB/liangjh_model/nginx/html:/usr/share/nginx/html
    - /root/SIAL-LAB/liangjh_model/nginx/nginx.conf:/etc/nginx/nginx.conf
    privileged: true #允许调用
  mysql:
    image: mysql:5.7.27
    ports:
    - 3306:3306
    environment:
      - MYSQL_ROOT_PASSWORD=admin
  redis:
    image: redis:latest
  vueblog:
    image: vueblog:latest
    build: .
    ports:
    - 8081:8081
    depends_on:
      - mysql
	  - redis

docker-compose.yml中已经提到，

宿主机的挂载目录：/root/SIAL-LAB/liangjh_model/nginx/html
挂载配置：/root/SIAL-LAB/liangjh_model/nginx/nginx.conf
所以我们在root目录下新建nginx目录，并进入nginx目录下新建html目录和一个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;
      }
  }
}

(4) 编写application-pro.yml

【注】

（1）数据库的账号密码是对应的，账号是root，密码与docker-compose对应。否则会出现400–》错误显示找不到”username”
,问题出现在数据库连接上

（2）注意redis的写法，其他写法会出现错误，不知道为什么？出现【500】的原因是这里。
（3）这个文件修改了需要重新生成jar包，重新制作镜像

application-pro.yml

# DataSource Config
spring:
    datasource:
        driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://mysql:3306/konblog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=Asia/Shanghai
        username: root
        password: admin
shiro-redis:
    enabled: true
    redis-manager:
        host: redis:6379

（5）打包后端，打包前端

【前端】
前端打包之后先修改前端调用后端的接口
axios.js

axios.defaults.baseURL = "http://192.168.0.117:8081"

然后npm run build打包得到dist文件夹，并把dist压缩成dist.zip上传到linux之后解压到/root/nginx/html目录下。
npm run build
把生成的dist文件夹传到上述html文件夹上
【后端】注意文件夹位置!
mvn clean package

(6) 编写Dockerfile文件

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

FROM java:8 

EXPOSE 8080 

ADD vueblog-0.0.1-SNAPSHOT.jar app.jar 

RUN bash -c 'touch /app.jar' 

ENTRYPOINT ["java", "-jar", "/app.jar", "--spring.profiles.active=pro"]

首先依赖jdk8环境，对外暴露8080
然后就是复制 springBoot jar到docker容器中并命名为app.jar
最后是执行命令java -jar /app.jar —spring.profiles.active=pro，使用的是我们另外编写的一个线上环境配置: application-pro.yml

(7) 部署

切准备就绪之后，我们就开始编排部署了哈。

首先本地打包vueblog项目，vueblog-0.0.1-SNAPSHOT.jar，并上传到linux中，同时docker-compose.yml、Dockerfile也上传到同一目录下。如图所示：

然后我们执行一下编排命令:

docker-compose up -d
最后提示如下：

说明我们已经成功编排啦。

nginx是80端口，所以我们直接输入ip地址就可以到达首页

常见问题

（1）服务器记得开放端口
（2）重新制作镜像：

把vue-blog，redis,mysql,nginx关闭容器
docker ps
docker stop id
删除images（只删除vue-blog就可以）
docker rmi -f imageID
重新制作
docker-compose up -d

（3）docker中的数据库如果没有数据(400错误)，就在线创建数据

进入容器：docker exec -it [容器id] [目录]
如进入mysql容器：docker exec -it id /bin/bash
进入mysql创建数据：
mysql -u root -p

参考：
https://www.zhuawaba.com/post/84
https://mubu.com/doc/7yCNTAI_zuh#o-L2jNklXavM

前后端分离项目线上部署

Linux相关栏目本月热门文章