成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

拿Nginx 部署你的靜態(tài)網(wǎng)頁(yè)

hikui / 2891人閱讀

摘要：關(guān)聯(lián)本地文件夾和遠(yuǎn)程倉(cāng)庫(kù)，注意地址是你的地址哦上面的后面三點(diǎn)就是，添加到碼云倉(cāng)庫(kù)，相信大家都知道。這里不能克隆到的，需要把服務(wù)器本機(jī)的公鑰添加到碼云上面。

emmmm，作為一個(gè)前端開(kāi)發(fā)時(shí)刻想著，怎么把自己寫(xiě)的東西，丟到自己的服務(wù)器上面，然后展示給別人看。下面我就簡(jiǎn)單直白的寫(xiě)下，如何用 Nginx 部署你的靜態(tài)網(wǎng)站。

事前準(zhǔn)備

云服務(wù)器，（我的是阿里云）

碼云或者 gihub （用來(lái)存放你的代碼）

事前配置

既然你有了云服務(wù)器(我就當(dāng)是你ubuntu 系統(tǒng)哦)，然后并且通過(guò)了備案，還有一個(gè)自己域名。那么很好，該有的東西你已經(jīng)是有了，下面就一起體驗(yàn)配置的樂(lè)趣吧。

第一步：mac 電腦直接通過(guò)下面的命令行連接到你的服務(wù)器。連接時(shí)候會(huì)叫你輸入密碼，輸入就是咯

ssh root@127.22.20.121 //你的服務(wù)器公有 ip

連接成之后會(huì)有下面的一個(gè)界面，

這就可以成功的登錄到你的服務(wù)器啦！

第二步：服務(wù)器上安裝 git和 Nginx

安裝 git很簡(jiǎn)單，在命令行模式下輸入sudo apt-get install git命令進(jìn)行安裝。安裝完畢之后輸入git --version就可以看到 git 的版本了；

安裝Nginx 我們可以很容易地安裝Nginxsudo apt-get install nginx，Ubuntu 14.04默認(rèn)情況下，Nginx安裝完成后會(huì)自動(dòng)啟動(dòng)。你可以訪問(wèn)默認(rèn)的Nginx登陸頁(yè)面，來(lái)確認(rèn)軟件通過(guò)訪問(wèn)你的服務(wù)器域名或?yàn)g覽器公共IP正在正常運(yùn)行。比如說(shuō)你直接在瀏覽器輸入127.22.20.121,就會(huì)看到以下哪個(gè)畫(huà)面。

正式部署

刀已經(jīng)磨好了，下面我們就霍霍向豬羊啦，首先本地建一個(gè)文件夾static-web-server然后在這個(gè)文件夾下面建立一個(gè) index.html，這個(gè) html我們隨便寫(xiě)點(diǎn)什么的東西就好了。畢竟重心在部署。

下面是index.html代碼




    
    
    nginx 靜態(tài)網(wǎng)站部署 
    


    
nginx靜態(tài)網(wǎng)站部署實(shí)例
naice blog

本地也東西也弄好，下面到來(lái)到碼云上面建立一個(gè)新的倉(cāng)庫(kù)，我的就叫static-web，然后把本地static-web-server的文件夾關(guān)聯(lián)到我們碼云static-web的倉(cāng)庫(kù)，并且提交到倉(cāng)庫(kù)上面，下面幾條命令就可以了。

tips：提交代碼需要你的本地公鑰復(fù)制到碼云的倉(cāng)庫(kù)的設(shè)置上面哦，大家這個(gè)部分自行百度解決嘛。

git remote add origin git@git.oschina.net:naihe138/static-web.git（關(guān)聯(lián)本地文件夾和遠(yuǎn)程倉(cāng)庫(kù)，注意地址是你的地址哦）

git add .

git commit -m "first"

git push -u origin master

上面的后面三點(diǎn)就是，添加到碼云倉(cāng)庫(kù)，相信大家都知道。
這會(huì)本地和倉(cāng)庫(kù)都已經(jīng)準(zhǔn)備好了。下面來(lái)到服務(wù)器設(shè)置，連接到你的服務(wù)器

首先通過(guò)命令行新建一個(gè) www文件夾

sudo mkdir /www

然后進(jìn)入 www文件夾

cd /www

然后再新建一個(gè)文件夾叫static-web,并且進(jìn)入這個(gè)文件夾里面

sudo mkdir static-web
cd static-web

路徑是

pwd
/www/static-web

然后在static-web文件夾里面，下載我們剛才上傳到碼云的代碼。

git clone git@git.oschina.net:naihe138/static-web.git
tips: 這里不能克隆到的，需要把服務(wù)器本機(jī)的公鑰添加到碼云上面。這個(gè)有很多教程我就不細(xì)說(shuō)了。

代碼都克隆到我們的服務(wù)器了之后，下面我們稍微配置一下 nginx 配置很簡(jiǎn)單，跟著我就可以了。進(jìn)入到 nginx 配置目錄

cd /etc/nginx/conf.d/

通過(guò) ls查看配置文件，（你之前沒(méi)有配置過(guò)，下面就是空的了），然后通過(guò) vi 命令新建一個(gè)配置文件，例如：
sudo vi static-naice-me.conf （我的頂級(jí)域名是naice.me通過(guò)解析子域名 static.naice.me，所以就起了這個(gè)static-naice-me.conf 名字的文件），然后你就進(jìn)入了一個(gè) vi 編輯的環(huán)境，按下 鍵盤(pán)的i 鍵，就可以寫(xiě)入內(nèi)容，寫(xiě)入以下內(nèi)容

server {
  server_name static.naice.me; // 你的域名或者 ip
  root /www/static-web/static-web; // 你的克隆到的項(xiàng)目路徑
  index index.html; // 顯示首頁(yè)
  location ~* ^.+.(jpg|jpeg|gif|png|ico|css|js|pdf|txt){
    root /www/static-web/static-web;
  } // 靜態(tài)文件訪問(wèn)
}

寫(xiě)入內(nèi)容之后，按下esc然后輸入:wq！來(lái)保存你編輯的內(nèi)容。

退出之后我們需要通過(guò)命令行重啟 nginx服務(wù)

sudo nginx -s reload
域名解析

域名解析是把域名指向網(wǎng)站空間IP，讓人們通過(guò)注冊(cè)的域名可以方便地訪問(wèn)到網(wǎng)站的一種服務(wù)，
下面簡(jiǎn)單說(shuō)說(shuō)一下域名解析的操作，你擁有了一個(gè)域名然后，進(jìn)入 dnspod,沒(méi)有的話賬號(hào)的話， 直接注冊(cè)登錄，然后進(jìn)到控制臺(tái)

添加域名

添加 a記錄

如下圖：

好了，我們剛好剛剛把解析好的域名寫(xiě)進(jìn)去我們的 nginx 的配置里面，也重啟了 nginx 服務(wù)，下面就直接輸入http://static.naice.me/，就可以訪問(wèn)到我們剛才寫(xiě)的靜態(tài)網(wǎng)頁(yè)，是不是有點(diǎn)小激動(dòng)？？

還有一種方式

就是可以借用 Nodejs 來(lái)輸出頁(yè)面，然后在構(gòu)建這個(gè) Nodejs 項(xiàng)目的是，需要能渲染這些 html 文件，這個(gè)比較利于后期擴(kuò)展，借助 pm2 自動(dòng)部署，比如增加數(shù)據(jù)庫(kù)，可以用 koa express 來(lái)搭建一個(gè)網(wǎng)站，不同的路由，訪問(wèn)你不同的后臺(tái) html 文件，模板引擎可以使用 ejs，這樣可以兼容你的 html，不需要修改為其他的模板格式。后面可以詳細(xì)說(shuō)說(shuō)。

最后安利一下個(gè)人博客： http://blog.naice.me/

done

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/39637.html

相關(guān)文章

  • 拿Nginx 部署你的靜態(tài)網(wǎng)頁(yè)

    摘要：關(guān)聯(lián)本地文件夾和遠(yuǎn)程倉(cāng)庫(kù)，注意地址是你的地址哦上面的后面三點(diǎn)就是，添加到碼云倉(cāng)庫(kù)，相信大家都知道。這里不能克隆到的，需要把服務(wù)器本機(jī)的公鑰添加到碼云上面。 emmmm，作為一個(gè)前端開(kāi)發(fā)時(shí)刻想著，怎么把自己寫(xiě)的東西，丟到自己的服務(wù)器上面，然后展示給別人看。下面我就簡(jiǎn)單直白的寫(xiě)下，如何用 Nginx 部署你的靜態(tài)網(wǎng)站。 事前準(zhǔn)備 云服務(wù)器，（我的是阿里云） 碼云或者 gihub （用來(lái)存...

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

  • Angular2 網(wǎng)站 SEO 攻略

    摘要：使用生成靜態(tài)頁(yè)，再配置在爬蟲(chóng)訪問(wèn)時(shí)提供靜態(tài)頁(yè)中的內(nèi)容。如何在爬蟲(chóng)訪問(wèn)時(shí)讓爬蟲(chóng)獲取到靜態(tài)頁(yè)中的內(nèi)容要演練此部分內(nèi)容，首先你要把網(wǎng)站用部署。 Angular 的優(yōu)點(diǎn)有很多，但如果用它來(lái)開(kāi)發(fā)網(wǎng)站的話，就不得不面對(duì)它的兩大缺點(diǎn)： 首頁(yè)加載慢 搜索引擎的爬蟲(chóng)獲取不到頁(yè)面內(nèi)容 由于 Angular 是通過(guò) js 動(dòng)態(tài)生成 dom 并插入到頁(yè)面中，搜索引擎默認(rèn)只能獲得頁(yè)面的標(biāo)題。我們可以使用 c...

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

  • 利用 NGINX 最大化 Python 性能，第一部分：Web 服務(wù)和緩存

    摘要：無(wú)論是將其用作的服務(wù)器反向代理服務(wù)器負(fù)載均衡器，還是同時(shí)使用以上三種功能，和都能帶來(lái)很大好處。再就是下篇文章會(huì)介紹如何把和當(dāng)作反向代理服務(wù)器和多個(gè)應(yīng)用程序服務(wù)器的負(fù)載均衡器。而使用將會(huì)有助于解決這一問(wèn)題。 【編者按】本文主要介紹 nginx 的主要功能以及如何通過(guò) NGINX 優(yōu)化 Python 應(yīng)用性能。本文系國(guó)內(nèi) ITOM 管理平臺(tái) OneAPM 編譯呈現(xiàn)。 Python 的著名之...

    1treeS 評(píng)論0 收藏0

  • 利用 NGINX 最大化 Python 性能，第一部分：Web 服務(wù)和緩存

    摘要：無(wú)論是將其用作的服務(wù)器反向代理服務(wù)器負(fù)載均衡器，還是同時(shí)使用以上三種功能，和都能帶來(lái)很大好處。再就是下篇文章會(huì)介紹如何把和當(dāng)作反向代理服務(wù)器和多個(gè)應(yīng)用程序服務(wù)器的負(fù)載均衡器。而使用將會(huì)有助于解決這一問(wèn)題。 【編者按】本文主要介紹 nginx 的主要功能以及如何通過(guò) NGINX 優(yōu)化 Python 應(yīng)用性能。本文系國(guó)內(nèi) ITOM 管理平臺(tái) OneAPM 編譯呈現(xiàn)。 Python 的著名之...

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

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

0條評(píng)論

閱讀需要支付1元查看
<