nginx部署项目上线

用户8886659322809
727 阅读4分钟

项目上线部署

此文章包括的内容：nginx本地部署项目和远程连接，从而实现项目上线，对外网也可以访问项目。

第一部分：本地部署

1.准备nginx

nginx作用：

  • 静态资源服务器
  • 反向代理
  • 负载均衡
  • Gzip 压缩
  1. 前往 Nginx 官方 下载 Nginx 资源包，建议下载 Stable version（长期稳定版本）
  2. 解压nginx.zip文件，放在没有中文目录下
  3. 我放在D盘下，进入目录cmd,执行nginx命令 image.png
  4. nginx 常用指令
  • 查看 Nginx 的版本号：nginx -V
  • 启动 Nginx：nginx
  • 快速停止或关闭 Nginx：nginx -s stop
  • 正常停止或关闭 Nginx：nginx -s quit
  • 配置文件修改重装载命令：nginx -s reload

以上指令都需要来到 nginx 目录下执行

执行指令的整个 nginx 目录都不能有任何特殊字符和中文

2.启动nginx

输入nginx命令

3.本地打包项目

在项目目录下输入npm run build命令

打包完成，项目目录生成dist文件

4.静态资源服务器

找到/nginx/conf/nginx.conf文件，进行配置nginx！

部署前端打包生成的文件

server {
  listen 5000; # nginx 开启的服务器端口号
  server_name localhost; # nginx 开启的服务器域名
  # 所以nginx服务器访问地址就是 http://localhost:5000

  # 处理访问 nginx 服务器的 / 的请求
  location / {
    root 本地磁盘打包生成的dist文件夹路径; # 实际访问的地址是本地磁盘打包生成的dist文件夹路径
  }
}

nginx服务器访问地址是 http://localhost:5000

此时访问，但是有问题，项目功能没有，刷新会404，其他路径也404

5.配置转发到目标服务器，重写前缀

nginx配置，利用反向代理解决跨域问题。

修改前缀为生产环境的前缀，前缀根据自己项目的来，我这里改成：/app-prod

目标服务器也是根据自己项目的来

是否要重写路径也是看自己的项目接口需求

server {
  listen 5000;
  server_name localhost;
  
  location / {
    root 本地磁盘打包生成的dist文件夹路径;
  }

  # 处理访问 nginx 服务器的 /app-dev 开头的请求, 转发到目标服务器去
  location /app-prod {
      proxy_pass http://gmall-h5-api.atguigu.cn/; # 转发的目标服务器地址
      rewrite ^/app-prod/(.*) /$1 break; # 重写路径 以^/app-dev/xxx开头的重写为/xxx
  }
}

重启nginx，此时访问功能可以，都是mock的数据不可以

6.解决刷新404问题

动静分离的概念：把动态请求和静态请求分开，不是讲动态页面和静态页面物理分离，可以理解为 Nginx 处理静态页面，Tomcat 处理动态页面。

  • 配置nginx，动静分离
  • 解决前端路由刷新 404 问题
server {
  listen 5000;
  server_name localhost;

  # 静态资源访问地址
  location / {
    root 本地磁盘打包生成的dist文件夹路径;
    # 解决前端路由刷新404问题
    try_files $uri $uri/ /index.html;
  }

  # 动态资源的访问地址
  location /app-prod {
      proxy_pass http://gmall-h5-api.atguigu.cn/;
      rewrite ^/app-prod/(.*) /$1 break;
  }
}

7.gzip压缩

  • 作用：提高传输效率，节约带宽
  • 通用配置gzip压缩
http {
  # 开启gzip压缩
  gzip  on;
  # 限制最小压缩，小于1字节文件不会压缩
  gzip_min_length 1;
  # 定义压缩的级别（压缩比，文件越大，压缩越多，但是cpu使用会越多）
  gzip_comp_level 3;
  # 定义压缩文件的类型
  gzip_types text/plain application/javascript application/json text/css text/javascript image/jpg image/jpeg image/gif image/png;


  # ...后面配置省略
}

重启nginx，刷新

以上是本地部署,仅自己电脑可以访问

下面是远程连接，部署项目上线

第二部分：远程连接

1.准备工作

  • 在服务器中准备安全组开放项目要用的端口号给外网访问

  • 创建远程连接（记住自己的账号，密码，IP地址）

image.png

  • 安装git

    输入命令yum install git

  • 安装nodejs

    1.复制最新 nodejs 的 linux 安装包下载地址

    去官网看最新版本，并用稳定版本

    安装包下载地址：registry.npmmirror.com/binary.html…

    linux 安装包的下载地址：registry.npmmirror.com/-/binary/no…

    2.来到云服务器，创建目录

    cd /usr/local

    3.输入指令下载

    wget https://registry.npmmirror.com/-/binary/node/v16.17.0/node-v16.17.0-linux-x64.tar.gz

    会将安装包下载到当前目录，可以通过 ls 命令查看是否下载完成

    4.解压安装包

    tar -xf node-v16.17.0-linux-x64.tar.gz

    5.删除安装包(这步选做)

    注意别把解压的文件给删除了

    rm node-v16.17.0-linux-x64.tar.gz

    在输入 y

    6.重命名文件夹

    mv node-v16.17.0-linux-x64 nodejs

    7.配置全局环境变量，从而任意位置可以访问 nodejs

    来到根目录 cd /root

    打开配置文件 vi .bash_profile

    按下 i 键进入编辑模式

    输入

    export PATH=$PATH:/usr/local/nodejs/bin

    按下 ESC :wq 保存并退出

    8f3b678343de0cf2eb37493fbcfa41a.png

    退出后输入指令让环境变量生效

    source .bash_profile

    在任意目录输入：node -v 查看是否有返回版本号

    5fae14f75dc50082b475ff4eb43e14a.png

  • 安装nginx

    1.安装 nginx 的依赖包

    yum install pcre pcre-devel gcc openssl openssl-devel zlib zlib-devel

    2.复制 nginx 安装包下载地址

    所有安装包下载地址：nginx.org/download

    下载地址：nginx.org/download/ng…

    3.下载安装包

    cd /

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

    4.解压安装包

    tar -zxvf nginx-1.23.1.tar.gz

    5.删除安装包

    rm nginx-1.23.1.tar.gz

    在输入 y

    cd nginx-1.23.1

    6.配置

    ./configure --with-http_ssl_module

    7.编译

    make

    8.安装

    make install

    此时 nginx 就已经安装完成，安装目录：/usr/local/nginx

    9.删除之前的解压安装包

    cd /

    rm -rf /nginx-1.23.1

    10.启动 nginx

    cd /usr/local/nginx/sbin

    ./nginx

    此时输入公网 ip 地址，就能访问 nginx 了~

注意需要配置安全组才能成功访问！

2.将代码部署到远程服务器上

1.使用 git 将代码克隆到远程服务器上

创建目录

mkdir /www

进入目录

cd /www

克隆代码

git clone xxx

2.远程打包项目

进入仓库内部

cd xxx

下载依赖

如果速度很慢要配置淘宝镜像

npm i

打包项目

npm run build

3.配置 nginx

  1. 通过文件树，找到 nginx 配置文件

/usr/local/nginx/conf/nginx.conf

  1. 修改配置文件

通过pwd 找到项目路径 ：\www\xxx\dist

改成远程克隆下来的项目地址

#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;

    # 开启gzip压缩
    gzip  on;
    # 限制最小压缩，小于1字节文件不会压缩
    gzip_min_length 1;
    # 定义压缩的级别（压缩比，文件越大，压缩越多，但是cpu使用会越多）
    gzip_comp_level 3;
    # 定义压缩文件的类型
    gzip_types text/plain application/javascript application/json text/css text/javascript image/jpg image/jpeg image/gif image/png;

    # 部署打包的项目资源
    server {
        listen 5000; # nginx 开启的服务器端口号
        server_name localhost; # nginx 开启的服务器域名
        # 所以nginx服务器访问地址就是 http://localhost:5000

        # 处理访问 nginx 服务器的 / 的请求
        location / {
            root \\www\\xxx\\dist; # 实际访问的地址是本地磁盘打包生成的dist文件夹路径
            # 解决前端路由刷新404问题
            try_files $uri $uri/ /index.html;
        }

        # 处理访问 nginx 服务器的 /app-prod 开头的请求, 转发到目标服务器去
        location /app-prod {
            proxy_pass http://gmall-h5-api.atguigu.cn/; # 转发的目标服务器地址
            rewrite ^/app-prod/(.*) /$1 break; # 重写路径 以^/app-prod/xxx开头的重写为/xxx
        }
    }

}

重启nginx/启动nginx

cd /usr/local/nginx/sbin

./nginx -s reload

此时项目完成上线部署，通过域名端口访问项目

avatar
文章
阅读
粉丝