前端项目部署

Aceyclee 发布于2019-07-25 14:21 / 2422人阅读

摘要：前端项目部署之前很少接触前端项目的部署，这次为了更全面的学习就在本机上装了一个虚拟机上，在虚拟机上练习了如何把一个写的项目部署到这个虚拟机的服务器上。

前端项目部署

之前很少接触前端项目的部署，这次为了更全面的学习就在本机上装了一个虚拟机上，在虚拟机上练习了如何把一个 react 写的 spa 项目部署到这个虚拟机的服务器上。由于 linux 也是刚接触不久，所以整个过程还是遇到了很多坑，这里记录下。

目标

我有一个用 react 写的单页面应用，然后希望部署到服务器上，通过 ip 如 192.168.1.240/config 这种路径下访问到我的应用。这个 react 项目依赖一个 node.js 的一个 api 服务，我需要在 nginx 上配置代理使得我的 react 应用能够访问到我的 api 服务。

准备

首先要准备的就是打包好的的 react 应用，然后在服务器上装一个 nginx 和一个 node.js。

针对我这个项目, 我把 react 打包好的项目全部放到了 /root/html/pageConfig 这个路径下。

nginx配置

修改 nginx 安装目录下的 ./conf/nginx.conf 文件：

#user nodody;
# 1. 由于我的 react 项目打包出来放在 root 目录下，需要设置user 为 root 时内容才能够被访问
user root;

worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  "$remote_addr - $remote_user [$time_local] "$request" "
    #                  "$status $body_bytes_sent "$http_referer" "
    #                  ""$http_user_agent" "$http_x_forwarded_for"";

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        # 2. 对我的/api请求转发到8989端口下node.js服务
        location /api {
            proxy_pass  http://127.0.0.1:8989;
        }
        # 3. 在/config下的请求都指向到我放在root下的configPage里的内容
         location /config {
            alias /root/html/configPage;
            index index.html index.htm;
            #rewrite /config  /root/html/configPage/index.html;
            try_files $uri $uri/ /config/index.html;
         }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;

这里就是只修改了默认配置文件的三个地方，来满足我的要求：

修改 user 为 root，使得 root 下的内容能够被访问

新增 location /api 设置 proxy_pass 使得 /api下的请求都被转发到 proxy_pass 设置的 node.js 服务处,满足我的前端页面 api 接口代理的问题

新增 location /config 的配置，使得 /config 下请求都转发至我 react 打包文件所在的路径。这样我访问 192.168.1.240/config就能看到我的页面。这里我当初是复制的location / 的配置，用的也是 root 指向路径，结果一直不行，查了资料，发现应该要写成 alias 才行

这里的配置文件可能需要更改多次，才能成功，需要注意的是，每次修改完 nginx 配置，需要重启下 nginx:

nginx -s reload

静态资源路径问题

把打包好的文件传到服务器上的时候，可能出现静态资源文件找不到的情况。

资源路径找不到的原因

可能的原因是当 react 应用打包的时候，生成 index.html 文件中插入 style 和 script 标签的路径不对，从而找不到静态资源。

静态资源找不到的解决方法

需要在 webpack 的配置文件中去修改一下 publicPath 这个属性，这个属性会影响你的静态资源文件插入到 index.html 中的路径。像我这个项目设置 publicPath: "./"就可以了，具体可以多修改几次多打包几次试试就行了。

前端路由 前端路由分类

前端路由分为两种实现，一种就是 hashRouter，另一种就是用 H5 新的 History API 实现的 browserRouter。由于 hashRouter 的路径带一个 # 不是特别好看，一般还是用 browserRouter 较多。

前端路由的问题

前端路由说白了就是路径变了，不去请求服务器，而是用 js 去改变页面的方式。这样的话，用 browserRouter 的话这里就存在一个问题，我用前端路由跳转到某一个路径下 /xxx，这是我刷新页面，这时候就会去服务器上拿资源，这个前端路由路径下肯定找不到资源，所以就会出现 404 报错。

解决方案

解决页面刷新 404 这个问题，只需要把所有的请求全部返回 index.html，可以搜索 history fallback 这个关键词查看相关资料。

针对我的这个 nginx 配置而言，只需要加入 try_files $uri $uri/ /config/index.html;,就能把前端路由路径发送给服务器时全部返回 index.html，这样就解决了 404问题。

Route路径匹配问题

配置好上述的 nginx 以及把打包好的文件放到对应的目录，再把我的 api 服务启动，再访问 192.168.1.240/config 时，已经能够正常的显示页面，并且接口也能正常代理请求到了。但是涉及到路由的页面却没有被渲染出来。

Route路径匹配的原因

回想一下，在 react-router-dom 的 Route 标签里传递一个 path={"/xx"} 的属性时，前端路由会根据这个 path 来渲染对应的 Route 上传递过去的 Component 组件。那么在我的 nginx 的设置中，我设置的是 location /config，也就是说我实际访问路径都是加上了前缀 /config，所以每个 Route 标签中传过去的路径都因为缺少了 /config 前缀导致所以的匹配都不成立，所以 Route 的页面都没有办法渲染。

Route路径匹配修改方法

方法很简单，在 BrowserRouter 上加一个 basename 的属性，给这属性传递 config (具体是什么值，依据你给 nginx设置 location 时的前缀，我的例子中是 config)，这样 Route 在匹配路径的时候会加上 basename，这样就能和对应路径匹配上，然后渲染对应页面。

总结

对 linux 不熟悉，nginx 也不熟悉，依靠着百度，摸爬滚打尝试修改了好多次 nginx 配置，终于能够 react 打包好的文件部署上去了， vue 项目的部署也是没什么区别的。

云服务器专线服务前端web项目部署到云服务器前端项目前端项目视频前端开发项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40006.html

前端自学笔记 - 第二篇(vuePress自动部署 & 后台项目自学)

摘要：今天部署好了项目，现在写好了博客页面，只要一提交，会自动打包并且部署如果部署失败，还会发送邮件提醒。但今天为了自动化部署项目，挂了三四十次了，真是惨不忍睹。。。而这第二个项目，将会是第一个的深入。长期更新前端自学笔记，欢迎关注前端自学笔记 - 第一篇(nginx/flutter/后台系统/vuepress博客）一、jenkins自动部署vuePress博客项目自动化部署项目de...

zzzmh 2019-08-26 10:43 评论0 收藏0
Jenkins实现前端项目自动化集成打包部署

摘要：原博客地址实现前端项目自动化集成打包部署掘金地址前言以前写前端项目打包部署，都是手动运行命令，打包完，然后压缩，再上传到服务器解压。验证提交代码，成功自动打包部署提交代码，观察界面，出现构建任务，构建完成之后收到邮件通知。原博客地址:https://yezihaohao.github.io/2017/09/09/Jenkins实现前端项目自动化集成打包部署/掘金地址:https://...

Guakin_Huang 2019-08-21 16:26 评论0 收藏0
Sentry异常监控方案部署-前端攻略

摘要：故而，我们需要在项目出现异常时主动对其进行收集上报，分析原因和影响后制定下一步解决方案。所以，我们需要一款成熟的异常监控系统来协助我们。最近在公司项目中部署了，用于项目中异常监控，涵盖了前端后端。原文首发于我的个人博客： https://lonhon.top/ 凡事只要有可能出错,那就一定会出错对于任何一个项目而言，本地测试肯定做不到100%覆盖，而且，我们也不能保证用户能按照我们...

Lorry_Lu 2019-08-22 16:31 评论0 收藏0
阿里云ECS服务器部署node项目和vue项目

摘要：阿里云服务器部署项目和项目遇到的问题第三章申请阿里云服务器阿里云服务器地址第一次啥都不懂选的数据中心版位中文版不含。步骤输入申请阿里云服务器时候创建的登录名和登录密码，点击链接。阿里云ECS服务器部署node项目和vue项目遇到的问题(第三章) 申请阿里云ECS服务器阿里云服务器地址 showImg(https://segmentfault.com/img/bVbgeNh?w=9...

dance 2019-08-23 11:38 评论0 收藏0
【Vue项目总结】项目nginx部署

摘要：项目开发完成，接下来是上线，关于项目的部署，我司前端是部署在服务器上，关于的相关文档，请自行查阅本文只记录部署时碰到的一些问题。其他总结文章常规打包优化方案组件通信处理方案后台管理项目总结项目开发完成，接下来是上线，关于vue项目的部署，我司前端是部署在nginx服务器上，关于nginx的相关文档，请自行查阅；本文只记录部署时碰到的一些问题。打包 vue项目打包后，是生成一系列的静...

CntChen 2019-07-25 14:50 评论0 收藏0