本地使⽤nginx部署前端服务
本地部署前端应⽤
我们在开发或解决问题后，需要部署代码到线上进⾏验证，但是有时候去部署环境是可能会直接影响到其他在使⽤环境的⼈。这个时候我们可以⾃⼰本地去部署代码。去模拟在线上运⾏的场景。
环境准备
1. nginx服务器
可以作为服务器的选择有很多。这⾥我们选择最常⽤的nginx
下载后，解压到⾃定义⽬录下即可。⽬录如下
现在我们去修改下f⽂件
worker_processes  1; # Nginx进程，⼀般设置和cpu核数⼀样
error_log  logs/error.log; #错误⽇志存放位置
events {
worker_connections  1024;
}
http {
include      pes; #⽂件扩展名和类型映射表
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部署前端项目2. 修改nginx配置
location / {
root  html; #服务默认启动⽬录
index  stones/index.html; #默认访问⽂件 (这⾥路径需要修改)
}
3. 启动服务
# 常⽤的nginx命令
# 查看Nginx的版本号：nginx -V
# 启动Nginx：start nginx  或者  nginx
# 快速停⽌或关闭Nginx：nginx -s stop
# 正常停⽌或关闭Nginx：nginx -s quit
# 配置⽂件修改重装载命令：nginx -s reload
# 查看windows任务管理器下Nginx的进程命令：tasklist /fi "imagename "
# 终⽌进程 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页⾯。下⾯我们试⼀试复杂的前端项⽬
准备前端项⽬
1. 这⾥使⽤以前的例⼦stones7进⾏打包。
PS E:\DDD\Vue3CLI\stones7> yarn build
yarn run v1.22.17
$ vue-cli-service build
|  Building
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 /guide/deployment.html
Done in 42.79s.
2. 将打好包的⽬录复制到html/stones⽬录下。
3. 重启nginx
D:\Software\nginx-1.21.4>nginx -s reload
注意: 如果像以上单独设置了⼀个 stones⽬录则需要在项⽬中配置base路径。以便正确的访问到我们的前端静态资源。
以Vue3项⽬stones7为例
stones7⽂件
// 1. 根⽬录下新增env配置⽂件
# 根路径
BASE_URL=/stones
// 2. fig.js 需要配置publicPath
publicPath: v.BASE_URL
// 3. 如果使⽤了路由
const router = createRouter({
history: v.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>
访问localhost:80, 成功

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。