React項目從創建到打包到云服務器指南

yintaolaowanzi 發布于2019-07-25 15:02 / 811人閱讀

摘要：一搭建項目二打包三云服務器設置一搭建項目這里采用官方提供的腳手架已自動集成相關配置生成的項目目錄結構如下為什么沒有配置文件的配置需要輸入命令將所有內建的配置暴露出來。

一搭建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 怎么把項目部署到云主機

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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