react 創(chuàng)建 部署

1.注冊一個新的阿里云ECS(然后連接)

2.1 wget命令下載Node.js安裝包。該安裝包是編譯好的文件,解壓之后,在bin文件夾中就已存在node和npm,無需重復(fù)編譯。

wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz

2.2 解壓文件。

tar xvf node-v6.9.5-linux-x64.tar.xz

2.3 創(chuàng)建軟鏈接,使node和npm命令全局有效。通過創(chuàng)建軟鏈接的方法,使得在任意目錄下都可以直接使用node和npm命令:

ln -s /root/node-v6.9.5-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v6.9.5-linux-x64/bin/npm /usr/local/bin/npm

2.4 查看node、npm版本。

node -v
npm -v

3. 部署node看安全組是否打開

3.1 新建項(xiàng)目文件example.js。

cd ~
touch example.js

3.2 使用vim編輯器打開項(xiàng)目文件example.js。

yum install vim
vim example.js

輸入 i,進(jìn)入編輯模式,將以下項(xiàng)目文件內(nèi)容粘貼到文件中。使用Esc按鈕,退出編輯模式,輸入:wq,回車,保存文件內(nèi)容并退出。
項(xiàng)目文件內(nèi)容:

const http = require('http');
const hostname = '0.0.0.0';
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World\n');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});

3.3 運(yùn)行項(xiàng)目。

node ~/example.js

最后瀏覽器訪問http://實(shí)例公網(wǎng)IP地址:端口號

4. 在本地創(chuàng)建react 項(xiàng)目

4.1 安裝creat-react-app cli

npm install -g create-react-app

4.2 創(chuàng)建工程

create-react-app react-ld

然后進(jìn)入項(xiàng)目根目錄react-seed安裝相關(guān)依賴

cd react-ld
npm install

4.3 暴露配置項(xiàng)
由于采用create-react-app創(chuàng)建的項(xiàng)目webpack等配置信息都是封裝好的,所以為了靈活修改相關(guān)配置,可以通過以下命令讓封裝好的配置文件暴露出來。

npm run eject

5. 把創(chuàng)建好的工程上傳服務(wù)器.(如果用用zip壓縮 :yum install -y unzip zip;)

6. 運(yùn)行

首先對項(xiàng)目進(jìn)行打包。

npm run build

可以通過以下命令在本地環(huán)境運(yùn)行打包后的項(xiàng)目。

serve -s build

如果沒有serve

npm install -g serve
export PATH=$PATH:/root/node-v6.9.5-linux-x64/bin/
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容