项目如何部署

我们平常写的项目通常只能在本机上运行，要想项目能被远程访问就不得不谈到项目部署的知识，接下来我通过实际操作的操作让大家来上线一个vue+springBoot项目。

1.在windows上将vue部署到nginx服务器上

介绍nginx

        Nginx是一款高性能的Web服务器和反向代理服务器，具有许多显著的特点和优势，使其在各种应用场景中都能发挥出色。

        首先，Nginx的设计重点在于高并发、高性能和低内存消耗。它采用异步、非阻塞的事件驱动架构，能够高效地处理大量并发连接，尤其是对于静态文件请求，效率极高。同时，在保持高性能的同时，Nginx对系统资源特别是内存的占用率较低，使得在相同的硬件条件下能提供更高的服务能力。

        其次，Nginx作为反向代理服务器，功能强大且灵活。它可以将客户端的请求转发到多个后端服务器，实现负载均衡、缓存和安全性等功能。Nginx提供了丰富的负载均衡策略，如轮询、加权轮询、IP哈希等，可以根据需要选择合适的策略。同时，它还可以根据配置实现HTTP、HTTPS、TCP等多种协议的负载均衡，并支持会话持久化、健康检查等功能。

        此外，Nginx对静态内容处理非常出色，可以快速地处理请求和发送静态内容，如HTML、图片、CSS、JavaScript等。这使得Nginx在提供静态资源服务方面效率很高，可以快速的响应大量的静态请求，减轻其他动态服务器的负担。

        同时，Nginx的配置非常灵活，管理员可以根据需要进行各种配置和优化，以满足不同的需求。例如，它可以配置为缓存一些响应结果，降低后端服务器的负载，提高数据的访问速度，平衡访问压力等。

        最后，Nginx具有广泛的应用场景，不仅可以用于静态文件服务、反向代理和负载均衡，还可以作为缓存服务器、访问控制和安全工具等。其性能优异、高可靠性、丰富的模块化支持和简单易用等优势，使其在互联网应用中得到了广泛的应用。

        总的来说，Nginx是一款功能强大、性能卓越、配置灵活的Web服务器和反向代理服务器，适用于各种需要处理大量并发连接和提供高效服务的场景。

nginx下载与安装

nginx官网：nginx news

进入官网点击download

下载Stable version 版本

 我这里用的是老版本1.18.0

 下载后进行解压

之后打开vscode将完成的前端vue项目打包

 打包完成后会在你的前端工程目录下生成一个dist文件夹将这个文件夹复制到nginx目录下的html中

之后打开nginx的配置文件nginx.conf 进行修改

将注释删除 后：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
	#监听localhist：8080 前端项目
    server {
        listen       80;
        server_name  localhost;



        location / {
            # 换成自己的地址
            root   B:/workspace/project-02/nginx-1.18.0/html/dist;
            index  index.html index.htm;
        }

        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            # 换成自己的地址
            root   B:/workspace/project-02/nginx-1.18.0/html
        }

       
      
    }


    

}

 把root后换成自己的地址

        location / {
            root   B:/workspace/project-02/nginx-1.18.0/html/dist;
            index  index.html index.htm;
        }

        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   B:/workspace/project-02/nginx-1.18.0/html
        }

之后启动nginx就可以正常的访问部署的前端项目了

注意每次更改完配置文件要执行修改重装载命令。

1. 找到nginx的安装目录，在目录上cmd进入黑窗口；

2. 启动

start nginx

3.配置文件nginx.conf修改重装载命令

nginx -s reload 

 nginx负载均衡和反向代理

 反向代理的配置方式

location /api/{
            proxy_pass   http://localhost:8090/;
        }

 表示以/api/开头的请求会被转发到http://localhost:8090/ 这个地址
 

1. 匹配/a：
   • 当配置为匹配/a时，它将只匹配那些URI精确为/a的请求。
   • 这意味着，如果客户端请求/a，这个规则会被触发。
   • 但是，如果客户端请求/a/（带有末尾的斜杠），或者/a/something（带有额外的路径组件），那么这个规则不会被触发。
2. 匹配/a/：
   • 当配置为匹配/a/时，它通常匹配以/a/开头的请求URI，但是否匹配取决于具体的服务器配置和使用的匹配类型（例如，精确匹配、前缀匹配、正则表达式匹配等）。
   • 在某些上下文中，/a/可能只匹配精确为/a/的请求，而不匹配/a或/a/something。
   • 在其他上下文中，/a/可能作为前缀匹配，意味着它会匹配所有以/a/开始的请求，如/a/, /a/b, /a/b/c等。
   • 如果服务器配置使用的是精确匹配，并且没有特别的指令来处理末尾的斜杠，那么/a/可能只会匹配/a/而不会匹配/a。

      

举个例子：

1. 如果一个客户端请求http://yourdomain.com/api/somepath，Nginx会将这个请求转发到http://localhost:8090/somepath。

2. 如果proxy_pass指令是proxy_pass http://localhost:8090;（没有末尾的斜杠），那么同样的请求http://yourdomain.com/api/somepath会被转发到http://localhost:8090/api/somepath。

反向代理的优先级

//优先级最高
location = /api/{
}
//优先级次高
location ^~/api/{
}
//优先级第三高 
//使用正则表达式进行匹配

//最后如果优先级一样高，写在前面的优先级高

负载均衡的配置方式

http {  
    upstream backend {  
        server backend1.example.com;  
        server backend2.example.com weight=2;  
        server backend3.example.com;  
    }  
    server {  
    listen 80;  
    location / {  
        proxy_pass http://backend;  
    }  
}
}

2.将项目上线到云服务器 

服务器请自己提前准备，可以购买网上的云服务器，安装操作系统为centos 7

docker 安装

详细的docker请看： Docker-****博客

 在这里就简单的讲一下docker的安装

1.卸载旧版

首先如果系统中已经存在旧的Docker，则先卸载：

yum remove docker \
    docker-client \
    docker-client-latest \
    docker-common \
    docker-latest \
    docker-latest-logrotate \
    docker-logrotate \
    docker-engine

2.配置Docker的yum库

首先要安装一个yum工具

yum install -y yum-utils

安装成功后，执行命令，配置Docker的yum源：

yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

3.安装Docker及其相关组件

最后，执行命令，安装Docker

yum install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

4.启动和校验

# 启动Docker
systemctl start docker

# 停止Docker
systemctl stop docker

# 重启
systemctl restart docker

# 设置开机自启
systemctl enable docker

# 执行docker ps命令，如果不报错，说明安装启动成功
docker ps

使用docker自定义java项目镜像

  相将java项目打包

      

 Dockerfile是一个用来构建Docker镜像的文本文件

内容为：

# 基础镜像
FROM openjdk:11.0-jre-buster
# 设定时区
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone
# 拷贝jar包
COPY interfaceGroup.jar /app.jar
# 入口
ENTRYPOINT ["java", "-jar", "/app.jar"]

之后将jar包和Dockerfile移入服务器的root目录中

 进入root目录，执行命令

docker build -t project-interface .

输入 

docker images 

来检查镜像是否创建成功创建

 

创建容器

docker run -d --name project-interface -p 8090:8090 --network aynu project-interface

 注意我们的java容器以及后续的mysql容器等等，一定要在同一个网络下，这样他们才能用过容器名来进行访问（因此我们的后端项目的yml中连接mysql的url为jdbc:mysql://mysql:3306/interface）

之后执行

docker logs -f project-interface

 来查看他的日志

 

看到spring表示运行成功。

 使用docker将nginx和前端项目部署到服务器

根据我们在windows上将前端项目部署到nginx上的操作，准备好一个文件夹nginx ,

里面包含前端的打包资源和nginx.conf

将这个文件夹复制到服务器的root目录下

执行命令完成下载nginx镜像并创建nginx容器 

docker run -d \
    --name nginx \
    -p 8080:8080 \
    -v /root/nginx/html:/usr/share/nginx/html \
    -v /root/nginx/nginx.conf:/etc/nginx/nginx.conf \
    --network aynu \
nginx

输入

docker ps

来检查容器是否正常运行

如果没有正常运行就输入 

docker logs nginx

 来查看他的日志文件进行纠错

使用docker安装mysql

 在服务器的root目录下创建一个文件夹mysql

其目录结构为：

 conf下有一个mysql的配置文件

文件内容为

[client]
default_character_set=utf8mb4
[mysql]
default_character_set=utf8mb4
[mysqld]
character_set_server=utf8mb4
collation_server=utf8mb4_unicode_ci
init_connect='SET NAMES utf8mb4'

 init下有一个初始化的sql脚本，自己导出自己的sql脚本放进去即可

执行命令

docker run -d \
  --name mysql \
  -p 3306:3306 \
  -e TZ=Asia/Shanghai \
  -e MYSQL_ROOT_PASSWORD=1234 \
  -v /root/mysql/data:/var/lib/mysql \
  -v /root/mysql/conf:/etc/mysql/conf.d \
  -v /root/mysql/init:/docker-entrypoint-initdb.d \
  --network aynu\
  mysql:5.7.24

 输入

docker ps

来检查容器是否正常运行

如果没有正常运行就输入 

docker logs mysql

查看他的日志文件进行纠错 

 使用docker安装redis

docker run --name redis --network aynu -p 6379:6379 -e REDIS_PASSWORD=123456 -d redis redis-server --appendonly yes

设置安全组

如果以上操作都完成了，依然访问不到，保证自己配置没有出错的前提下请按照一下步骤进行排查：

1. 安全组规则：确保您的阿里云服务器安全组规则允许外部流量访问8080端口。您需要在安全组规则中添加一条入站规则，以允许来自外部的TCP流量访问该端口。（先设置8080的安全组，然后设置网卡开放8080端口）
2. 防火墙设置：检查您的阿里云服务器上的防火墙设置，确保没有阻止外部访问8080端口的规则。您需要添加一条规则来允许外部访问该端口。（或者直接关闭防火墙）

 

这样部署就完成了。