如何通过live-server部署启动前端工程

目录

为什么要搭建门户系统

创建工程

导入静态资源

安装live-server

安装

运行

设置通过域名访问

配置nginx反向代理

测试

---

为什么要搭建门户系统

门户系统面向的是用户，安全性很重要，而且搜索引擎对于单页应用并不友好。因此我们的门户系统不再采用与后台系统类似的SPA（单页应用）。

依然是前后端分离，不过前端的页面会使用独立的html，在每个页面中使用vue来做页面渲染。下面就让我们开始搭建吧~

创建工程

创建一个新的工程：

导入静态资源

 将leyou-portal解压，并复制到这个项目下

项目结构如下

安装live-server

 

前台项目我们不使用webpack的形式部署了，我们使用live-server。这是一款带有热部署功能的小型开发服务器，用来展示你的HTML/JS/CSS，但是它不能用于部署到最终的网站

安装

npm install -g live-server

运行

live-server

正常情况下就会弹出启动后的页面

我们想把启动端口改成9002 

live-server --port=9002

输入上面的命令再启动即可

设置通过域名访问

 启动switchhosts，修改hosts文件，添加一行配置即可：

配置nginx反向代理

修改nginx配置，将www.leyou.com反向代理到127.0.0.1:9002 ，记得要把www.leyou.com这个server放在最上面

server {
    listen       80;
    server_name  www.leyou.com;

    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    location / {
        proxy_pass http://127.0.0.1:9002;
        proxy_connect_timeout 600;
        proxy_read_timeout 600;
    }
}

重启nginx服务

nginx -s reload

测试

输入www.leyou.com