本地使用nginx部署前端服务
作者：互联网
本地部署前端应用
我们在开发或解决问题后，需要部署代码到线上进行验证，但是有时候去部署环境是可能会直接影响到其他在使用环境的人。这个时候我们可以自己本地去部署代码。去模拟在线上运行的场景。
环境准备
- nginx服务器
可以作为服务器的选择有很多。这里我们选择最常用的nginx 下载
下载后，解压到自定义目录下即可。 目录如下
现在我们去修改下conf/nginx.conf文件
nginx.conf
worker_processes 1; # Nginx进程，一般设置和cpu核数一样
error_log logs/error.log; #错误日志存放位置
events {
worker_connections 1024;
}
http {
include mime.types; #文件扩展名和类型映射表
default_type application/octet-stream; #默认的文件类型
sendfile on; #开启高效文件传输模式
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
server {
listen 80; # 启动后的端口
server_name localhost; # 启动时的地址 server name 为虚拟服务器的识别路径。因此不同的域名会通过请求头中的HOST字段，匹配到特定的server块，转发到对应的应用服务器中去。
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html; #服务默认启动目录
index index.html index.htm; #默认访问文件
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
# 其他错误码页面配置 配置后需要重启
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
以上是简化后的配置，重点在于，location中的配置。location /代表我们访问根路径会被匹配进行路由到配置的页面。
测试一下。在默认启动的目录下。添加一个我们自己根目录stones 并且添加index.html。添加一个自定义的根目录的原因在于
在微服务的场景下。我们往往不止一个前端项目，为了将不同项目的代码放置在不同的目录下。
<!-- html/stones/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<h1> hello world！ </h1>
</body>
</html>
- 修改nginx配置
location / {
root html; #服务默认启动目录
index stones/index.html; #默认访问文件 (这里路径需要修改)
}
- 启动服务
# 查看Nginx的版本号：nginx -V
# 启动Nginx：start nginx 或者 nginx
# 快速停止或关闭Nginx：nginx -s stop
# 正常停止或关闭Nginx：nginx -s quit
# 配置文件修改重装载命令：nginx -s reload
# 查看windows任务管理器下Nginx的进程命令：tasklist /fi "imagename eq nginx.exe"
# 终止进程 taskkill /F /pid 252288
PS D:\Software\nginx-1.21.4> start nginx
PS D:\Software\nginx-1.21.4>
只见cmd黑窗口闪了下。我们访问试一试 server_name + listen = localhost:80; 尝试浏览器访问下
启动成功。
以上只是一个简单的html页面。下面我们试一试复杂的前端项目
准备前端项目
- 这里使用以前的例子
stones7进行打包。
PS E:\DDD\Vue3CLI\stones7> yarn build
yarn run v1.22.17
$ vue-cli-service build
| Building for production...
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
File Size Gzipped
dist\js\chunk-vendors.5e9f437b.js 145.84 KiB 52.14 KiB
dist\js\app.2169c032.js 5.09 KiB 2.30 KiB
dist\js\about.56e62a22.js 0.38 KiB 0.29 KiB
dist\css\app.90dd0e3c.css 0.42 KiB 0.26 KiB
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
Done in 42.79s.
-
将打好包的目录复制到
html/stones目录下。
-
重启nginx
D:\Software\nginx-1.21.4>nginx -s reload
注意: 前端项目中html中引用一些样式表，或者一些js代码块，的base路径得需要和nginx里面配置的保持一致。
已vue项目为例
// 1. 根目录下新增env配置文件
# 根路径
BASE_URL=/stones
// 2. vue.config.js 需要配置publicPath
publicPath: process.env.BASE_URL
// 3. 如果使用了路由
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
// 4. public/index.html 引用路径需要配置 BASE_URL
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
访问http://localhost:80, 成功
标签：index,Nginx,前端,js,nginx,html,本地,KiB 来源： https://www.cnblogs.com/stones-3/p/15663842.html