使用Nignx打包前端项目

项目打包

我们开发用的脚手架其实就是一个微型服务器，用于：支撑开发环境、运行代理服务器等。

打包完的文件中不存在：.vue、.jsx、.less等文件，而是：html、css、js等。

打包后的文件，不再借助脚手架运行，而是需要部署到服务器上运行。

打包前，梳理好前端项目的ajax封装（请求前缀、代理规则等）

比如开发环境请求前缀为.dev，生产环境为.prod;

配置在vue.config配置proxy代理

打开package.json查看build命令，执行打包命令npm run build，之后将得到dist文件夹（包含打包后的静态文件）

本地服务器部署

使用express框架在本地创建一个服务器

安装express到启动服务器

(提前安装node)

1. 新建一个文件夹，执行npm init -y命令，生成package.json，再执行npm add express命令，下载express.

2. 使用热部署（nodemon）进行启动（修改代码后不必重新启动服务器）安装命令：npm i nodemon -g

3. 新建文件server.js，写入代码：

   const express = require('express')
   const app = express()
   const port = 8080
    
   // 配置静态资源
   app.use(express.static(__dirname + '/public'))
    
   app.listen(port, () => {
     console.log(`本地服务器启动http://localhost:${port}`)
   })
   

4. 创建文件夹public，将打包dist下的文件移动到public

5. 终端输入nodemon .\server.js，启动服务器。

得到如下文件树：

解决问题

出现两个问题：

• 刷新页面出现404（因为router后缀被理解为后端…）
• 请求无法发送（因为未处理跨域问题）

解决刷新404问题

法一：打包前修改路由配置，使用hash模式（缺点：路径有#不美观）

法二：使用node相关的库(connect-history-api-fallback )

1. 安装：

npm install --save connect-history-api-fallback

2. 在server.js中添加代码：

let history = require('connect-history-api-fallback')

app.use(history())

完整代码如下：

const express = require('express')
let history = require('connect-history-api-fallback')
 
const app = express()
app.use(history())
const port = 8080
 
// 配置静态资源
app.use(express.static(__dirname + '/public'))
 
app.listen(port, () => {
  console.log(`本地服务器启动http://localhost:${port}`)
})

请求无法发送问题

使用node相关的库(http-proxy-middleware )

1. 下载http-proxy-middleware

npm i http-proxy-middleware

2. 在server.js中添加代码：

   const { createProxyMiddleware } = require('http-proxy-middleware')
   
   app.use(
     '/prod-api',
     createProxyMiddleware({
       target: 'https://heimahr.itheima.net/api',
       changeOrigin: true,
       pathRewrite: { '^/prod-api': '' }
     })
   

nginx服务器部署

安装到运行

1. 搜索nginx下载并解压

2. 基本使用：双击启动nginx.exe服务；注意每次修改后都需要重新启动nginx服务（通过任务管理器关闭nginx后再次启动）

3. 更改配置：conf/nginx.conf后运行自己打包的文件

   location / {
               root   D:\dist; #此处设置为打包后的dist文件夹
               index  index.html index.htm;
              }
   

解决问题

问题和本地服务器时一样：刷新404、请求无法发送

刷新404问题

location / {
            root   D:\dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;#解决刷新404

请求无法发送问题

location /prod-api/ {
            # 设置代理目标
            proxy_pass https://heimahr.itheima.net/api/;
}

云服务器部署

• 前提要有一个属于自己的云服务器，并下载好liunx系统
• 本地电脑安装Xftp、Xshell软件（Xftp用于传输文件，Xshell用于编写命令）

阿里云白嫖+配置

按步骤完成阿里云服务器创建，接下来是配置部分

关于Xftp和Xshel的连接远程服务器

点击新建，然后输入主机地址，点击连接，接着根据提示输入用户（默认是root）、密码，如下图。

部署

本地资源上传

使用Xftp将dist打包内容移到var/test1(新建文件夹)下

这里自己选择（建议不要放在root文件下面，会有权限的问题）

进入Xshell终端，输入yum install nginx安装nginx；

nginx配置

进入etc/nginx文件夹下的/nginx.conf进行配置

 server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        # 自己配置打包内容，将root改为刚才放置在var文件夹下的内容
        location / {
            root   /var/test1;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;#解决刷新404
        }
        #设置代理目标（有需要设置）
        location /prod-api/ {
            # 设置代理目标
            proxy_pass https://heimahr.itheima.net/api/;
        }
      
        
        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

默认端口80