React项目从创建到打包到云服务器指南

目录:

一  搭建react项目

二  打包

三  云服务器设置

一 搭建react项目:

这里采用react官方提供的脚手架 create-react-app (已自动集成webpack相关配置)

生成的项目目录结构如下:

create-react-app

ps: 为什么 没有webpack配置文件? 

webpack的配置需要 输入 npm run eject 命令将所有内建的配置暴露出来。

create-react-app 已经为做了绝大部分事情,配好了webpack

现在就能使用 npm  run start 开始写react 项目了



省略开发过程   



二  打包

我们可以看到package.json中的快捷命令

package.json

分别对应项目scripts下的文件:

scripts文件夹

build文件就是打包项目打包的一系列配置

(本文暂时不分析create-react-app配置文件)

运行 npm run build 后项目中会多出一个build的文件夹

build文件夹

我们只需要把 build这个文件夹 放到云服务器上 即可 


三  云服务器设置

注:本文以 centos 为例

       推荐yum 源安装(本文省略 yum 源配置,请自行百度或者看他人的博文)

1 )安装Nginx服务器

       首先 打开命令行 输入 ssh root@yourIp 连上你的服务器

       输入  yum install -y nginx   命令安装nginx 服务器

       安装完成后 进入 nginx 配置文件目录 一般是  /etc/nginx/ 下

nginx

       在该目录下新建一个vhost文件夹作为你自己的配置文件目录

       然后进入vhost 新建 一个配置文件   比如 example.conf

server {
   listen      5000;  //端口号  可以自己设置
   server_name  localhost;
   root /usr/local/reactProjects/yourReactProject;//注意这是里放 你上面 build 文件夹里 的 内容
   location / {
      try_files $uri @fallback;
   }
   location @fallback {
     rewrite .* /index.html break;
   }
   error_page   500 502 503 504  /50x.html;
   location = /50x.html {
     root   html;
   }
}

      注意:  /usr/local/reactProjects/yourReactProject  路径只是举个例子 你可以放在其他目录下 

              上传文件到 云服务器 可以用xftp 或者其他的软件 都行 


       再输入 vi nginx.conf   添加下图划红线部分代码

nginx.conf

      把你的配置include进来

      到此简易版的Nginx配置好了 

      但其实Nginx最重要的反向代理我们还没配置 

      本文暂时不研究反向代理,如需要请自行百度或者查看他人的博文,见谅



       最后 输入 systemctl start nginx 开启nginx服务

       浏览器上输入  yourIpAdress:5000/  便可以访问你的页面了

     (当然了,还得  后端提供 API )


       另外  systemctl status nginx 可以查看nginx的运行状态

       以及 systemctl stop nginx 可以 关闭nginx 服务






       over 

       by  潘小闲

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,721评论 7 110
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,997评论 19 139
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,243评论 7 35
  • 构建一个小项目——FlyBird,学习webpack和react。(本文成文于2017/2/25) 从webpac...
    布蕾布蕾阅读 16,897评论 31 98
  • 木木君爱学习阅读 203评论 0 0