阿里云服務(wù)器建站指南（進(jìn)階篇）：發(fā)布你的個人主頁

時間：2023-08-13 15:45:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-08-13 15:45:01 來源：網(wǎng)站運(yùn)營

阿里云服務(wù)器建站指南（進(jìn)階篇）：發(fā)布你的個人主頁：　　筆者在上一篇博文中跟大家分享了如何利用Xshell和Xftp同你的遠(yuǎn)程服務(wù)器進(jìn)行連接，同時在CentOS下如何安裝Node.js和Express框架，并且快速搭建了一個簡易服務(wù)器，這篇文章將詳細(xì)講述如何設(shè)置Node.js文件，在阿里云服務(wù)器上發(fā)布你的個人主頁。

　　上一篇博文地址：MeCC：超詳細(xì)！阿里云服務(wù)器ECS建站指南！

---

Step 1 使用Express快速搭建服務(wù)器

　　具體方法在前一篇博文中已經(jīng)詳細(xì)闡述過，大致是在你希望的目錄下使用如下指令：

express demoAppcd demoAppnpm install

Tip：為了能更方便的操作，筆者建議先在你的本地電腦上搭建一個localhost服務(wù)器，將所有下面的配置全部搞定后再一次性上傳到云服務(wù)器上~

　　由于Express默認(rèn)是采用了EJS模板引擎進(jìn)行渲染，如果你要發(fā)布的文件只是單純的HTML，那么需要對目錄下的app.js文件進(jìn)行一些調(diào)整：

// 下列代碼為精簡版本，如果你希望加入請求日志等模塊，可以保留原app.js的內(nèi)容// 引用express和path模塊var express = require('express');var path = require('path');// 這里保留了引用routes下index的語法，方便后期添加新的網(wǎng)頁var indexRouter = require('./routes/index');// 實(shí)例化expressvar app = express();// 設(shè)置express的靜態(tài)文件目錄，后面會詳細(xì)講app.use(express.static(path.join(__dirname, 'public')));// 服務(wù)器路由攔截，如果路徑為“/”則跳轉(zhuǎn)到indexRouter對應(yīng)的路由頁面app.use('/', indexRouter);// 監(jiān)聽8080端口并輸出appapp.listen(8080, function () {console.log("server is starting at 8080")})module.exports = app;　　由于引用了indexRouter，我們還需要對routes文件夾下的index.js文件進(jìn)行一些調(diào)整：

var express = require('express');var router = express.Router();/* GET home page. */router.get('/', function(req, res, next) { res.sendFile(__dirname + "/index.html") /* 這里需要填寫絕對路徑，__dirname代表服務(wù)器的絕對路徑，后面的index.html則是筆者想要發(fā)布的html入口文件，你可以改成你的文件名字。 */});module.exports = router;Step 2　存放靜態(tài)文件

　　完成了上述調(diào)整后，你就可以將你的html入口文件（筆者這里是index.html）放在demoApp/routes 文件夾下，開啟服務(wù)器就可以正常瀏覽了~

　　等等，你說你還有一堆CSS、JS、圖片等著載入呢？

　　那這些就是我在上面提到的靜態(tài)文件了~我們之前已經(jīng)設(shè)置了服務(wù)器的靜態(tài)文件目錄為‘public’，我們進(jìn)入demoApp/public文件夾下，可以看到express已經(jīng)默認(rèn)為我們創(chuàng)建了三個文件夾：

　　沒錯，正是images、javascripts和stylesheets！

　　下一步就簡單了，將html文件所需要的各類文件分類放進(jìn)文件夾中，筆者建議，在每個文件夾下，建立一個以項(xiàng)目名稱命名的文件夾，然后再把文件放在該文件夾下，如下圖所示：

　這樣一來，如果你要發(fā)布多個頁面，就可以設(shè)置不同的文件夾，彼此不會相互影響。

Step 3 靜態(tài)文件路徑設(shè)置

　　到了這一步，你已經(jīng)完成了90%的工作，最后一步，是要對你的html等文件中的引用路徑做一些調(diào)整：

//　你可以使用絕對路徑<script src="/javascripts/mecc/index.js">//　也可以使用相對路徑<script src="./javascripts/mecc/index.js">關(guān)于靜態(tài)文件路徑的小提示：

你可以通過

localhost:8080/images/mecc/01.jpg 訪問到

demoApp/public/images/mecc/01.jpg　　也就意味著你在設(shè)置引用路徑的時候不用考慮‘public’，關(guān)于靜態(tài)文件問題如果你有什么疑慮，可以百度一下，也歡迎評論或私信我。

Step 5 開啟服務(wù)器

　　所有文件的設(shè)置已經(jīng)完成，你可以通過下列指令

node app　　檢測你的頁面是否成功上線，如果沒問題的話，將node_modules文件夾刪掉后，利用Xftp6將整個文件夾拖曳至你的阿里云服務(wù)器，完成文件上傳，然后輸入下列指令即可在線看到你的主頁啦~

cd demoAppnode app　　不過目前只是臨時發(fā)布，如果你關(guān)閉了Xshell，服務(wù)器也就會斷開，你可以輸入下列指令代替【node app】讓服務(wù)器一直在后端運(yùn)行（注意，如果你的服務(wù)器已經(jīng)在運(yùn)行，請先按CTRL+C停止運(yùn)行）：

nohup node app.js >/dev/null 2>&1 &　　此時，你的程序就在后臺跑起來了，注意，如果你要關(guān)閉Xshell，請使用下列指令正常退出：

exit　　如果你想強(qiáng)制關(guān)閉又不想影響程序在后臺運(yùn)行，可以加一句：

trap "" HUP　　好了，恭喜你，你的主頁已經(jīng)跑起來了！

Step 6 關(guān)閉服務(wù)器

　　最后一個問題，如何關(guān)閉一直在后臺跑的程序呢？

　　原理很簡單，想想windows下該怎么辦~調(diào)出任務(wù)管理器，結(jié)束進(jìn)程！其實(shí)CentOS下也是類似的操作：

// 通過這個命令可以查看所有在運(yùn)行的進(jìn)程，注意找到node app進(jìn)程，記下PID號碼ps -ef// 通過下列指令結(jié)束指定PID進(jìn)程，假設(shè)node app進(jìn)程的PID為1234kill 1234

---

　　以上就是本篇博文的全部內(nèi)容了，歡迎你留言或私信，如果你也想擁有自己的第一臺阿里云ECS服務(wù)器，歡迎點(diǎn)擊下列鏈接購買！

---

　　本文章同步發(fā)布在【MeCC雜說】微信公眾號，公眾號會不定時發(fā)送前后端技術(shù)干貨及筆者原創(chuàng)文章，歡迎大家搜索關(guān)注！