需求背景：作為一個(gè)前端，特別身處于中小公司時(shí)，對(duì)于部署也需要有所了解。本次就介紹前端基礎(chǔ)的項(xiàng)目部署。本次使用的是阿里云服務(wù)器進(jìn)行的部署

部署核心步驟

1.準(zhǔn)備打包好的前端代碼（dist包）或者是一個(gè)html文件
2.購(gòu)買阿里云服務(wù)器,并且連接
3.為阿里云服務(wù)器安裝ngnix開(kāi)啟web服務(wù)
4.使用xshell和sftp將自己的前端代碼放到服務(wù)器上

1.準(zhǔn)備前端代碼

這部分很簡(jiǎn)單，可以隨意準(zhǔn)備。我這邊就隨便起了個(gè)vue腳手架，然后打了個(gè)dist包。

大家嫌麻煩那么就直接使用一個(gè)html文件也可以，里面隨意寫點(diǎn)內(nèi)容就行

2.購(gòu)買阿里云服務(wù)器

如果是作為練習(xí)的話，買最便宜的就OK了。其實(shí)沒(méi)什么，地域選擇國(guó)內(nèi)，然后配置選最低的就行了，便宜。操作系統(tǒng)一般都是選centOS64 ，把免費(fèi)分配公網(wǎng)ip勾上就行

購(gòu)買完成后，你可能不知道在哪里，你需要點(diǎn)控制臺(tái)，然后找到云服務(wù)器ECS

然后你就能找到你的服務(wù)器了，其中最重要的就是實(shí)例（管理你的服務(wù)器狀態(tài)）和安全組（控制可訪問(wèn)該服務(wù)器的端口號(hào)）

點(diǎn)擊實(shí)例中的遠(yuǎn)程連接，看是否能正常連接。 這里的ip地址（公）就是待會(huì)你要連接的服務(wù)器的ip地址，也是別人訪問(wèn)你網(wǎng)站的地址，可以注意一下。

如果你的頁(yè)面顯示這個(gè)，說(shuō)明你與遠(yuǎn)程連接已經(jīng)成功了

3.為阿里云服務(wù)器安裝ngnix開(kāi)啟web服務(wù)

a.準(zhǔn)備工作：安裝xshell（用來(lái)連接服務(wù)器）和xftp（用來(lái)上傳你的文件）。
如何安裝這兩個(gè)軟件：直接從360安全衛(wèi)士安裝吧，迅速還無(wú)毒

b.打開(kāi)xshell，然后連接你的遠(yuǎn)程服務(wù)器

之后會(huì)彈出讓你輸用戶名（一般是root）和密碼。最后就是連接成功了

恭喜你，此刻已經(jīng)可以和服務(wù)器通信了。雖然剛才在云服務(wù)器上也可以遠(yuǎn)程連接，但是使用xshell一般比較方便

注意點(diǎn)，如果你這里如果連接不上。那么你一定需要看我這一步！?。?！很重要?。?！去云服務(wù)器頁(yè)面設(shè)置安全組，建議大家都去做這一步?。。?！

添加一個(gè)22的入口（這個(gè)和xshell連接的端口號(hào)需要是一致的，xshell默認(rèn)是22），其他選擇如圖

再添加一個(gè)80的入口，用于nginx的,跟上面的一樣的步驟

c.安裝反向代理nginx
命令：yum install nginx

然后中途會(huì)停一下讓你選擇，輸入y再按回車就行了。最后就是安裝成功。

有這個(gè)complete就說(shuō)明成功了
但是此時(shí)你只是在服務(wù)器安裝了nginx，并沒(méi)有在遠(yuǎn)程服務(wù)器啟動(dòng)這個(gè)nginx的服務(wù)。這里就要用到幾個(gè)命令了。我先全部放出來(lái)，后面會(huì)用到部分。 (注意千萬(wàn)不要把nginx打成了ngnix?。。。。。。。。?！我老是打錯(cuò))
安裝nginx：yum install nginx
看是否有ngnix進(jìn)程：netstat -anput | grep nginx
查看服務(wù)器端口占用情況：netstat -ntlp
nginx啟動(dòng):nginx
nginx重啟:nginx -s reload
關(guān)閉nginx：
nginx -s stop : 快速停止nginx
nginx -s quit ：完整有序的停止nginx
查看默認(rèn)的nginx配置文件路徑： nginx -t

d.啟動(dòng)nginx
命令：nginx，一般輸完沒(méi)有任何的反饋，如果你不確定有沒(méi)有啟動(dòng)nginx，那么你可以使用netstat -anput | grep nginx這個(gè)命令看看有沒(méi)有nginx的端口占用

上面這個(gè)圖看不出來(lái)，可以輸這個(gè)命令netstat -anput | grep nginx看看有沒(méi)有端口占用

很明顯我這里有nginx占用的80端口
然后在瀏覽器輸入你對(duì)外的ip地址。如果頁(yè)面出現(xiàn)了內(nèi)容（一般是centos或者nginx頁(yè)面）就說(shuō)明你的nginx啟動(dòng)成功了，我這里是因?yàn)榉帕隧?yè)面，所以有頁(yè)面了,你們的應(yīng)該不是這個(gè)頁(yè)面，但是只要出現(xiàn)了有文字，就說(shuō)明步驟是正確的

e.將你的文件放置到服務(wù)器上
點(diǎn)擊你的xshell傳輸新建文件，會(huì)把剛才下載的xftp打開(kāi)

此時(shí)右邊就是你的云服務(wù)器的桌面了，右鍵新建一個(gè)web文件夾，再在里面新建一個(gè)html1文件夾，把你的dist文件傳輸上去

怎么把本地的放上去？直接拖拽到文件夾的空白區(qū)域就行

f.修改nginx文件，讓我們的nginx服務(wù)代理我們自己的html文件
先找到默認(rèn)的nginx配置文件路徑： nginx -t

在xftp上找到該文件傳輸?shù)阶约旱碾娔X上（默認(rèn)是傳輸?shù)阶烂嫔系模?br>

使用vscode（沒(méi)有vscode，用webstorm和記事本也可以）編輯該文件，主要是改這里的路徑改成我們剛才上傳的路徑

然后把該nginx.conf覆蓋服務(wù)器上（就是上傳到服務(wù)器，拖進(jìn)去）的這個(gè)文件

g.重啟nginx（nginx要求修改了nginx.conf配置之后必須重啟后才生效）
打開(kāi)xshell：輸入nginx -s reload，重啟,重啟之后沒(méi)有任何反應(yīng)，這是正常的不要慌

此時(shí)用瀏覽器，打開(kāi)你的ip地址。如果顯示出來(lái)了你自己的網(wǎng)頁(yè)，那就要說(shuō)明你的網(wǎng)頁(yè)已經(jīng)上線成功了，你可以把你的ip發(fā)給任意一個(gè)人，他們都能訪問(wèn)你的網(wǎng)站了

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-444710.html

到了這里，關(guān)于前端項(xiàng)目部署，阿里云服務(wù)器部署前端項(xiàng)目，超詳細(xì)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！