本地使用nginx部署前端服务

2021/12/9 7:19:17

编程Tag： js 前端 html nginx 本地 index KiB

本文主要是介绍本地使用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, 成功

这篇关于本地使用nginx部署前端服务的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

本地使用nginx部署前端服务

本地部署前端应用

环境准备

准备前端项目

相关编程文章