7

部署实战-Docker+nginx部署前后端分离项目 - Akai-yuan

 1 year ago
source link: https://www.cnblogs.com/akai-yuan/p/17084558.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

本文是基于Docker、Docker-compose、nginx、centos7、springboot进行前后端分离项目部署
关于Docker相关知识，可以查看文章：应用容器引擎-Docker
Dockerfile的文章链接：Dockerfile详解
@Author：Akai-yuan
@更新时间：2023/2/1

1.安装Docker和Docker-Compose

1.安装Docker

记一次踩坑：误装podman-docker
问题概述：Centos8去下载Docker时，默认装的是podman-docker。当你去执行命令：systemctl start docker时，会出现以下错误：
2784327-20230202002644335-389015575.png

所以我们必须卸载装的podman-docker,重新安装。

1.卸载podman-docker

yum remove docker

2.下载docker-ce源

curl https://download.docker.com/linux/centos/docker-ce.repo -o /etc/yum.repos.d/docker-ce.repo

3.安装dockers-ce

yum install docker-ce -y

2.安装Docker-Compose

1.下载可能略慢，请耐心等待

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

2.赋予权限

sudo chmod +x /usr/local/bin/docker-compose

3.查看版本，安装成功

docker-compose --version

2.下载nginx

1.拉取nginx镜像

docker pull nginx

2.linux下安装nginx

1.安装nginx依赖

#安装gcc
yum install gcc-c++
 
#安装PCRE pcre-devel
yum install -y pcre pcre-devel
 
#安装zlib
yum install -y zlib zlib-devel
 
#安装Open SSL
yum install -y openssl openssl-devel

2.下载nginx安装包

wget http://nginx.org/download/nginx-1.16.1.tar.gz

tar -xvf nginx-1.16.1.tar.gz

4.在usr/local/路径下创建一个文件夹并命名为nginx

#创建一个文件夹
cd /usr/local
mkdir nginx
cd nginx

5.退出文件夹

cd /

6.进入/路径下的nginx-1.61.1

cd nginx-1.16.1/

7.执行./configure

./configure

8.执行make

make

9.执行make install

make install

10.nginx已完成安装，默认安装目录为

/usr/local/nginx

11.进入安装位置的sbin目录，使用./nginx启动nginx

cd /usr/local/nginx/sbin

./nginx

12.浏览器中输入自己虚拟机/学习机/服务器的IP即可访问

2784327-20230202002700338-754876457.png

3.修改nginx配置文件

找到自己根目录下的nginx-1.16.1，然后找到conf文件夹，然后将servr中的location全部替换为：
ip地址填写自己的ip，对应端口号分别为前端IP端口号、后台IP端口号

        location / {
            proxy_pass http://10.21.23.91:8083;
        }

        location /api {
           proxy_pass http://10.21.23.91:7020/api;
        }

3.打包前端代码

1.gitlab/github...拉取前端代码到idea，打开idea终端执行以下命令

npm run build

若是失败可以先执行yarn install

2.前端生成的静态包如下所示，最外层的包可以自己命名，此处我自己命名为artifacts

2784327-20230202002711792-488085670.png

3.将idea连接到远程主机

注意：此处也可以直接使用XSheel连接远程主机，或者Xftp进行文件传输。

3.1找到''浏览远程主机''

2784327-20230202002733466-1471233031.png

3.2进行SSH配置

2784327-20230202002744885-1492295566.png

3.3点击测试连接：成功！

2784327-20230202002750805-708665671.png

3.4不知道虚拟机ip？可在linux终端/Xshell执行：ifconfig -a查询ip：

ens192中的inet之后内容便是：

2784327-20230202002758085-995699575.png

3.5 添加远程连接

2784327-20230202002803978-1931557063.png

注意：这里的根路径，可以写到：存放DockerFile、docker-compose.yml、前端静态页面包的上一个包为止
此处，我将DockerFile、docker-compose.yml、前端静态页面包全部放到/lbs下
可以看到，我们的学习机根目录下面的包：

2784327-20230202002813143-1857364537.png

修改一下根路径，改为/lbs

2784327-20230202002822157-1590935224.png

此时界面如下

2784327-20230202002837455-1368556838.png

右键添加一个nginx目录
2784327-20230202002848282-998677695.png

将artifacts包移动到nginx目录下，并修改artifacts文件名为html

2784327-20230202002857644-479373374.png

在nginx目录下新建文件nginx.conf

2784327-20230202002910333-503258217.png

在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       8083;
        server_name  192.168.184.131;
        location / {
            root   /usr/share/nginx/html;
            # nginx 报404需要加下面这行
            try_files $uri $uri/ /index.html last; 
            index  index.html index.htm;
            #nginx 报405加下面这行
            #error_page 405 =200 http://$host$request_uri;
        }
        #nginx 报 连接错误 、没有数据（We’re sorry but “XXX” doesn’t work...放开下面的注释（我是这个问题，如果不行可以试试方法二）
        #location ^~ /api/ {
            #proxy_pass http://114.0.0.0:8999/;
        #}
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        location /api {
            proxy_pass http://192.168.184.131:7020/api
        }
    }
}

4.将artifacts包下的内容，全部copy到nginx目录下

2784327-20230202002923468-923738445.png

4.打包后台代码

1.clean+package

2784327-20230202002933875-322629013.png

2.target目录下得到jar包

2784327-20230202002941554-1076553197.png

可以自己修改jar包的名字，此处我自己修改为archive.jar

3.将.jar文件直接拖入到远程主机对应存放目录下

2784327-20230202002952813-1559171182.png

4.书写Dockerfile

lbs目录下右键新建文件Dockerfile

2784327-20230202002959560-2035224033.png

Dockerfile文件内容如下

#使用java 8 版本
FROM java:8
COPY archive.jar /archive.jar
CMD ["--server.port=7020"]
#对外暴露的端口
EXPOSE 7020
ENTRYPOINT ["java", "-jar", "/archive.jar"]

写完后一定要记得点击它上传
2784327-20230202003156374-2054792661.png

5.编写dockerfile-compose.yml

继续右键新建文件，命名为dockerfile-compose.yml
内容如下：

version: "3"
services:
  nginx: # 服务名称，用户自定义
    image: nginx:latest  # 镜像版本
    ports:
      - 8083:8083  # 前端项目暴露的端口
    volumes: # 挂载
      # html和nginx.conf 挂载
      - /lbs/nginx/html:/usr/share/nginx/html
      - /lbs/nginx/nginx.conf:/etc/nginx/nginx.conf
    privileged: true # 这个必须要，解决nginx的文件调用的权限问题
  archive:
    image: archive:latest
    build: . # 表示以当前目录下的Dockerfile开始构建镜像
    ports:
      - 7020:7020 #后端项目暴露的端口
    privileged: true

最后执行：

docker-compose-up -d

此时浏览器访问：IP:端口号（例如：10.21.23.91:7020）以确定部署成功。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK