React项目从创建到打包到云服务器指南
一 搭建react项目:这里采用react官方提供的脚手架 create-react-app (已自动集成webpack相关配置) 生成的项目目录结构如下:
ps: 为什么 没有webpack配置文件? webpack的配置需要 输入 create-react-app 已经为做了绝大部分事情,配好了webpack 现在就能使用 省略开发过程 二 打包我们可以看到package.json中的快捷命令
分别对应项目scripts下的文件:
build文件就是打包项目打包的一系列配置 (本文暂时不分析create-react-app配置文件) 运行
我们只需要把 build这个文件夹 放到云服务器上 即可 三 云服务器设置注:本文以 centos 为例 推荐yum 源安装(本文省略 yum 源配置,请自行百度或者看他人的博文) 1 )安装Nginx服务器 首先 打开命令行 输入 ssh root@yourIp 连上你的服务器 输入 yum install -y nginx 命令安装nginx 服务器 安装完成后 进入 nginx 配置文件目录 一般是 /etc/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 或者其他的软件 都行 再输入
把你的配置include进来 到此简易版的Nginx配置好了 但其实Nginx最重要的反向代理我们还没配置 本文暂时不研究反向代理,如需要请自行百度或者查看他人的博文,见谅 最后 输入 浏览器上输入 yourIpAdress:5000/ 便可以访问你的页面了 (当然了,还得 后端提供 API ) 另外 以及 此外后端项目的部署可参考 基于Node的Koa2项目从创建到打包到云服务器指南 by 潘小闲 未完待续 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |