docker部署前后端

Ubuntu系统

准备工作，先安装docker

• 更新您的包管理工具。

sudo apt-get update

• 添加阿里云源到您的实例中

sudo curl -fsSL https://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | apt-key add -

• 安装Docker社区版本，容器运行时containerd.io，以及Docker构建和Compose插件。

sudo apt-get -y install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

• 启动Docker并设置Docker守护进程在系统启动时自动启动，这样可以确保每次系统启动时，Docker服务也会自动启动。

sudo systemctl start docker
sudo systemctl enable docker

• 通过查看Docker版本命令，验证Docker是否安装成功。

sudo docker -v

• 其他系统安装可参考 更多方式

1.安装ngnix

（1）拉取官方Nginx镜像

ubuntu@VM-8-5-ubuntu:~$ sudo docker pull nginx:latest

（2）运行Nginx容器：

ubuntu@VM-8-5-ubuntu:~$ sudo docker run --name nginx-test -p 8080:80 -d nginx

2.安装Mysql

（1）拉取MySQL官方镜像：

ubuntu@VM-8-5-ubuntu:~$ sudo docker pull mysql:8.0

（2）运行MySQL容器：

ubuntu@VM-8-5-ubuntu:~$ sudo docker run -d -p 3306:3306 --name websocket-mysql -v /mydata:var/lib/mysql -e MYSQL_ROOT_PASSWORD=root123 mysql:8.0

（3）处理连接不上数据库问题

• mysql远程链接，报2059策略问题
• 解决方案有两
  — 升级你的MySQL客户端库到支持caching_sha2_password的版本
  — 更改MySQL用户的认证插件回到mysql_native_password
  首先进入这个容器，登录mysql

  --登录容器
  docker exec -it mysql bash
  --登录mysql
  mysql -u root -p

  运行下面命令

  use mysql;

  回到之前的认证插件

  ALTER USER 'root'@'%' IDENTIFIED WITH 'mysql_native_password' BY '123456

  刷新生效

  flush privileges;

3.部署后端代码（cool-admin-midway）

（1）安装midway镜像

ubuntu@VM-8-5-ubuntu:~$ sudo docker build -t midway /home/ubuntu/cooltest/midway

（2）运行midway容器：

ubuntu@VM-8-5-ubuntu:~$ sudo docker run -p 8001:8001 --name mymidway midway

（3）通过服务器ip+端口号8001，即可访问到后端项目

4.部署前端代码（cool-admin-vue）

（1）先打包前端vue项目dist,将其放在一个文件夹下
（2）编写default.conf文件，这个文件主要写一下代理、路由定向等，刚在刚打包的dist同级目录下

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html index.htm;
    if ($request_method = 'OPTIONS') {
        return 204;
    }
    location /api/ {
      proxy_pass http://119.29.237.177:8001/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header REMOTE-HOST $remote_addr;
      #缓存相关配置
      #proxy_cache cache_one;
      #proxy_cache_key $host$request_uri$is_args$args;
      #proxy_cache_valid 200 304 301 302 1h;
      #持久化连接相关配置
      proxy_connect_timeout 3000s;
      proxy_read_timeout 86400s;
      proxy_send_timeout 3000s;
      #proxy_http_version 1.1;
      #proxy_set_header Upgrade $http_upgrade;
      #proxy_set_header Connection "upgrade";
      add_header X-Cache $upstream_cache_status;
      #expires 12h;
    }
    location / {
      try_files $uri $uri/ = 404;
    }
}

（3）编写dockerfile文件，也是放在dist的同级目录下

FROM nginx:latest
# 将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下
COPY dist/ /usr/share/nginx/html/
COPY default.conf /etc/nginx/conf.d/default.conf

（4）进入到三个文件所在根目录，安装前端镜像

ubuntu@VM-8-5-ubuntu:~$ sudo docker build -t vue_app .

（5）继续安装前端容器(容器暴露端口9000映射到宿主主机的80端口)

ubuntu@VM-8-5-ubuntu:~$ sudo docker run -d -p 9000:80 --name myvue vue_app

（6）通过服务器ip+端口号9000即可访问前端项目（前台，安全组即防火墙要先开通9000端口，前面的数据库3306端口及后端8001端口同理）