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

yintaolaowanzi 发布于2019-07-25 15:02 / 764人阅读

摘要：一搭建项目二打包三云服务器设置一搭建项目这里采用官方提供的脚手架已自动集成相关配置生成的项目目录结构如下为什么没有配置文件的配置需要输入命令将所有内建的配置暴露出来。

一搭建react项目
二打包
三云服务器设置

一搭建react项目:

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

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

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

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

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

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

省略开发过程

二打包

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

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

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

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

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

我们只需要把 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 或者其他的软件都行

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

把你的配置include进来

到此简易版的Nginx配置好了

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

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

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

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

（当然了，还得后端提供 API ）

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

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

此外后端项目的部署可参考基于Node的Koa2项目从创建到打包到云服务器指南

by 潘小闲

未完待续

同步github

云服务器 GPU云服务器从服务器到云计算项目部署到云主机上怎么把项目部署到云vps 怎么把项目部署到云主机

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

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

Spring Boot 参考指南（部署到云）

摘要：第章部署应用程序的灵活打包选项在部署应用程序时提供了大量的选择，你可以将应用程序部署到各种云平台容器映像例如或虚拟真实机器上。本节介绍一些更常见的部署场景。第VI章. 部署 Spring Boot 应用程序 Spring Boot的灵活打包选项在部署应用程序时提供了大量的选择，你可以将Spring Boot应用程序部署到各种云平台、容器映像(例如Docker)或虚拟/真实机器上。本...

learning 2019-08-16 12:28 评论0 收藏0
基于Node的Koa2项目从创建到打包到云服务器指南

摘要：你会看到如下信息然后输入对应上图中的若出现类似上图信息说明启动成功了接下来就能随时访问到接口了本文只对简单的介绍，详细使用教程请自行百度此外项目的配置请看项目从创建到打包到云服务器指南潘小闲一创建koa2项目二放到云服务器一创建koa2项目为了节省开发成本，本文采用koa-generator脚手架来创建koa2项目首先npm安装脚手架 $ npm install -g ...

lylwyy2016 2019-08-21 16:23 评论0 收藏0
使用prince-cli，轻松构建高性能React SPA项目~

摘要：对模块进行了打包，监听文件更改刷新等功能，创建了个服务，分别为静态资源服务用于代理本地资源，与自刷新浏览器请求服务用于接受，请求，返回数据服务用于收发消息。除了项目，还可以换成项目。项目地址如果觉得对你有所帮助，多谢支持 prince-cli 快速指南这是一个为快速创建SPA所设计的脚手架，旨在为开发人员提供简单规范的开发方式、服务端环境、与接近native应用的体验。使用它你能够获...

roundstones 2019-08-23 10:29 评论0 收藏0
React Native组件开发指南

摘要：的组件开发一直处在一个比较尴尬的处境。目录包含了当前组件的源码，是组件开发最主要的目录。许多的开发者对于依然持怀疑态度。 React Native的组件开发一直处在一个比较尴尬的处境。在官方未给予相关示例与脚手架的情况下，社区中依然诞生了许许多多的React Native组件。因为缺少示例与规范，很多组件库仅含有一个index.js文件。这种基础的目录结构也导致了一些显而易见的问题，例...

yuanxin 2019-08-23 15:29 评论0 收藏0