首页 > 系统相关 >Docker+nginx部署前后端分离项目

Docker+nginx部署前后端分离项目

时间:2023-02-02 00:12:03浏览次数:43  
标签:compose 部署 jar nginx html usr Docker docker

1.下载Docker和Docker-Compose

1.安装Docker

记一次踩坑:误装podman-docker
问题概述:Centos8去下载Docker时,默认装的是podman-docker。当你去执行命令:systemctl start docker时,会出现以下错误:
image.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

3.下载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

3.解压

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即可访问
image.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;
        }

4.打包前端项目

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

npm run build 

若是失败可以先执行yarn install

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

image.png

3.将idea连接到远程主机

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

3.2进行SSH配置

image.png

3.3点击测试连接:成功!

image.png

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

ens192中的inet之后内容便是:
image.png

3.5 添加远程连接

image.png
注意:这里的根路径,可以写到:存放DockerFile、docker-compose.yml、前端静态页面包的上一个包为止
此处,我将DockerFile、docker-compose.yml、前端静态页面包全部放到/lbs下
可以看到,我们的学习机根目录下面的包:
image.png
修改一下根路径,改为/lbs
image.png
此时界面如下
image.png
右键添加一个nginx目录
image.png
将artifacts包移动到nginx目录下,并修改artifacts文件名为html
image.png
在nginx目录下新建文件nginx.conf
image.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目录下

image.png

5.打包后端springboot代码

1.clean+package

2.target目录下取到jar包


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

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

image.png

4.书写Dockerfile

lbs目录下右键新建文件Dockerfile
image.png
Dockerfile文件内容如下

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

写完后一定要记得点击它上传
image.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

标签:compose,部署,jar,nginx,html,usr,Docker,docker
From: https://www.cnblogs.com/akai-yuan/p/17084558.html

相关文章

  • Nginx配置文件不生效,Nginx配置文件重启也不生效
    Nginx配置在重启(reload)后也不生效环境(windowsnginxworker_processes4)WindowsNginx配置在重启后不生效,杀掉所有nginx进程:修改 worker_processes1重启nginxtaskk......
  • docker 常用命令
     镜像和容器的区别:启动镜像就会生成容器1.启动docker:sudo systemctl start docker2.拉取镜像:sudo docker pull hello-world3.运行镜像:sudo docker r......
  • Docker 搭建 Nginx 及部署 静态vue项目 以及 映射静态资源
    一、Docker 搭建Nginx 参考https://www.cnblogs.com/mangoubiubiu/p/16796373.html二、部署静态vue项目1、将你打好的包上传至服务器 2、修改nginx配置 ......
  • 安装docker
    兜兜转转的,遇到了很多问题吧其实就是一句话也让我这个菜鸡花费了好几个小时-------------------------------------------------------------------------------------......
  • docker本地私有仓库与harbor私有仓库
    一、搭建本地私有仓库1、首先下载registry镜像1dockerpullregistry 2、在daemon.json文件中添加私有镜像仓库地址12345678......
  • Dubbo 入门系列之快速部署一个微服务应用
    本文将基于DubboSamples示例演示如何快速搭建并部署一个微服务应用。背景Dubbo作为一款微服务框架,最重要的是向用户提供跨进程的RPC远程调用能力。如上图所示,Dubbo......
  • Nginx 动态 转发 配置
    根据url转发任何求情http求情http://localhost/proxy/http://baidu.com/会访问:http://baidu.comhttps求情http://localhost/proxy/https://baidu.com/会访问:http......
  • nginx agent 来自官方的nginx 配置管理&监控方案
    我以前介绍过使用git+api模式的nginx配置管理,同时还介绍过一个基于graylog的日志收集方案,nginxagent是nginx官方提供的nginx配置以及metrics监控解决方案包含的特......
  • 基于KubeSphere在K8S发布微服务ruoyi----6.部署基础环境harbor私有仓库
      1下载并解压cd/tmp wgethttps://github.com/goharbor/harbor/releases/download/v2.6.0/harbor-offline-installer-v2.6.0.tgz  tarxfharbor-offline......
  • jenkins流水线部署K8S应用
    通过独立的jenkins部署K8S应用PS:这种方式是jenkins独立,然后slave已容器方式运行,master是独立出来的,减少运维成本,还能提高效率。master部署​​https://blog.csdn.net/Hlroli......