成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React項(xiàng)目從創(chuàng)建到打包到云服務(wù)器指南

yintaolaowanzi / 820人閱讀

摘要：一搭建項(xiàng)目二打包三云服務(wù)器設(shè)置一搭建項(xiàng)目這里采用官方提供的腳手架已自動(dòng)集成相關(guān)配置生成的項(xiàng)目目錄結(jié)構(gòu)如下為什么沒(méi)有配置文件的配置需要輸入命令將所有內(nèi)建的配置暴露出來(lái)。

一  搭建react項(xiàng)目 
二  打包
三  云服務(wù)器設(shè)置
一 搭建react項(xiàng)目:

這里采用react官方提供的腳手架 create-react-app (已自動(dòng)集成webpack相關(guān)配置)

生成的項(xiàng)目目錄結(jié)構(gòu)如下：

ps: 為什么 沒(méi)有webpack配置文件？

webpack的配置需要 輸入 npm run eject 命令將所有內(nèi)建的配置暴露出來(lái)。

create-react-app 已經(jīng)為做了絕大部分事情，配好了webpack

現(xiàn)在就能使用 npm run start 開始寫react 項(xiàng)目了

省略開發(fā)過(guò)程

二 打包

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

分別對(duì)應(yīng)項(xiàng)目scripts下的文件：

build文件就是打包項(xiàng)目打包的一系列配置

(本文暫時(shí)不分析create-react-app配置文件)

運(yùn)行 npm run build 后項(xiàng)目中會(huì)多出一個(gè)build的文件夾

我們只需要把 build這個(gè)文件夾 放到云服務(wù)器上 即可

三 云服務(wù)器設(shè)置

注：本文以 centos 為例

推薦yum 源安裝(本文省略 yum 源配置,請(qǐng)自行百度或者看他人的博文)

1 ）安裝Nginx服務(wù)器

首先 打開命令行 輸入 ssh root@yourIp 連上你的服務(wù)器

輸入  yum install -y nginx   命令安裝nginx 服務(wù)器

安裝完成后 進(jìn)入 nginx 配置文件目錄 一般是  /etc/nginx/ 下

在該目錄下新建一個(gè)vhost文件夾作為你自己的配置文件目錄

然后進(jìn)入vhost 新建 一個(gè)配置文件 比如 example.conf

server {
   listen      5000;//端口號(hào)  可以自己設(shè)置
   server_name  localhost;
   root /usr/local/reactProjects/yourReactProject;//注意這是里放 你上面 build 文件夾里 的 內(nèi)容
   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 路徑只是舉個(gè)例子 你可以放在其他目錄下

另外 上傳文件到 云服務(wù)器 可以用xftp 或者其他的軟件 都行

再輸入 vi nginx.conf 添加下圖劃紅線部分代碼

把你的配置include進(jìn)來(lái)

到此簡(jiǎn)易版的Nginx配置好了

但其實(shí)Nginx最重要的反向代理我們還沒(méi)配置

本文暫時(shí)不研究反向代理，如需要請(qǐng)自行百度或者查看他人的博文，見諒

最后 輸入 systemctl start nginx 開啟nginx服務(wù)

瀏覽器上輸入 yourIpAdress:5000/ 便可以訪問(wèn)你的頁(yè)面了

（當(dāng)然了，還得 后端提供 API ）

另外 systemctl status nginx 可以查看nginx的運(yùn)行狀態(tài)

以及 systemctl stop nginx 可以 關(guān)閉nginx 服務(wù)

此外后端項(xiàng)目的部署可參考 基于Node的Koa2項(xiàng)目從創(chuàng)建到打包到云服務(wù)器指南

by 潘小閑

未完待續(xù)

同步github

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/40556.html

相關(guān)文章

  • Spring Boot 參考指南（部署到云）

    摘要：第章部署應(yīng)用程序的靈活打包選項(xiàng)在部署應(yīng)用程序時(shí)提供了大量的選擇，你可以將應(yīng)用程序部署到各種云平臺(tái)容器映像例如或虛擬真實(shí)機(jī)器上。本節(jié)介紹一些更常見的部署場(chǎng)景。 第VI章. 部署 Spring Boot 應(yīng)用程序 Spring Boot的靈活打包選項(xiàng)在部署應(yīng)用程序時(shí)提供了大量的選擇，你可以將Spring Boot應(yīng)用程序部署到各種云平臺(tái)、容器映像(例如Docker)或虛擬/真實(shí)機(jī)器上。 本...

    learning 評(píng)論0 收藏0

  • 基于Node的Koa2項(xiàng)目從創(chuàng)建到打包到云服務(wù)器指南

    摘要：你會(huì)看到如下信息然后輸入對(duì)應(yīng)上圖中的若出現(xiàn)類似上圖信息說(shuō)明啟動(dòng)成功了接下來(lái)就能隨時(shí)訪問(wèn)到接口了本文只對(duì)簡(jiǎn)單的介紹，詳細(xì)使用教程請(qǐng)自行百度此外項(xiàng)目的配置請(qǐng)看項(xiàng)目從創(chuàng)建到打包到云服務(wù)器指南潘小閑 一 創(chuàng)建koa2項(xiàng)目二 放到云服務(wù)器 一 創(chuàng)建koa2項(xiàng)目 為了節(jié)省開發(fā)成本，本文采用koa-generator腳手架來(lái)創(chuàng)建koa2項(xiàng)目 首先npm安裝腳手架 $ npm install -g ...

    lylwyy2016 評(píng)論0 收藏0

  • 使用prince-cli，輕松構(gòu)建高性能React SPA項(xiàng)目~

    摘要：對(duì)模塊進(jìn)行了打包，監(jiān)聽文件更改刷新等功能，創(chuàng)建了個(gè)服務(wù)，分別為靜態(tài)資源服務(wù)用于代理本地資源，與自刷新瀏覽器請(qǐng)求服務(wù)用于接受，請(qǐng)求，返回?cái)?shù)據(jù)服務(wù)用于收發(fā)消息。除了項(xiàng)目，還可以換成項(xiàng)目。項(xiàng)目地址如果覺得對(duì)你有所幫助，多謝支持 prince-cli 快速指南 這是一個(gè)為快速創(chuàng)建SPA所設(shè)計(jì)的腳手架，旨在為開發(fā)人員提供簡(jiǎn)單規(guī)范的開發(fā)方式、服務(wù)端環(huán)境、與接近native應(yīng)用的體驗(yàn)。使用它你能夠獲...

    roundstones 評(píng)論0 收藏0

  • React Native組件開發(fā)指南

    摘要：的組件開發(fā)一直處在一個(gè)比較尷尬的處境。目錄包含了當(dāng)前組件的源碼，是組件開發(fā)最主要的目錄。許多的開發(fā)者對(duì)于依然持懷疑態(tài)度。 React Native的組件開發(fā)一直處在一個(gè)比較尷尬的處境。在官方未給予相關(guān)示例與腳手架的情況下，社區(qū)中依然誕生了許許多多的React Native組件。因?yàn)槿鄙偈纠c規(guī)范，很多組件庫(kù)僅含有一個(gè)index.js文件。這種基礎(chǔ)的目錄結(jié)構(gòu)也導(dǎo)致了一些顯而易見的問(wèn)題，例...

    yuanxin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<