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

資訊專欄INFORMATION COLUMN

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

arashicage / 1536人閱讀

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

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

事前準(zhǔn)備

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

碼云或者 gihub （用來存放你的代碼）

事前配置

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

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

ssh [email protected] //你的服務(wù)器公有 ip

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

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

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

安裝 git很簡單，在命令行模式下輸入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)。你可以訪問默認(rèn)的Nginx登陸頁面，來確認(rèn)軟件通過訪問你的服務(wù)器域名或?yàn)g覽器公共IP正在正常運(yùn)行。比如說你直接在瀏覽器輸入127.22.20.121,就會(huì)看到以下哪個(gè)畫面。

正式部署

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

下面是index.html代碼




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


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

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

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

git remote add origin [email protected]:naihe138/static-web.git（關(guān)聯(lián)本地文件夾和遠(yuǎn)程倉庫，注意地址是你的地址哦）

git add .

git commit -m "first"

git push -u origin master

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

首先通過命令行新建一個(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 [email protected]:naihe138/static-web.git
tips: 這里不能克隆到的，需要把服務(wù)器本機(jī)的公鑰添加到碼云上面。這個(gè)有很多教程我就不細(xì)說了。

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

cd /etc/nginx/conf.d/

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

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

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

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

sudo nginx -s reload
域名解析

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

添加域名

添加 a記錄

如下圖：

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

還有一種方式

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

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

done

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

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

相關(guān)文章

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

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

    hikui 評論0 收藏0

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

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

    niuxiaowei111 評論0 收藏0

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

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

    1treeS 評論0 收藏0

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

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

    v1 評論0 收藏0

發(fā)表評論

0條評論

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