当前位置：首页 > news >正文

使用Nignx打包前端项目

news 来源：原创 2024/9/22 7:21:18

项目打包

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

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

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

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

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

配置在vue.config配置proxy代理

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

本地服务器部署

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

安装express到启动服务器

(提前安装node)

新建一个文件夹，执行npm init -y命令，生成package.json，再执行npm add express命令，下载express.
使用热部署（nodemon）进行启动（修改代码后不必重新启动服务器）安装命令：npm i nodemon -g

新建文件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}`)
})

创建文件夹public，将打包dist下的文件移动到public
终端输入nodemon .\server.js，启动服务器。

得到如下文件树：

解决问题

出现两个问题：

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

解决刷新404问题

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

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

安装：

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

在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 )

下载http-proxy-middleware

npm i http-proxy-middleware

在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服务器部署

安装到运行

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

更改配置：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 {}}