拿Nginx 部署你的靜態網頁

時間 2019-11-07

標籤 nginx 部署靜態網頁欄目 Nginx 简体版

原文原文鏈接

emmmm，做爲一個前端開發時刻想着，怎麼把本身寫的東西，丟到本身的服務器上面，而後展現給別人看。下面我就簡單直白的寫下，如何用 Nginx 部署你的靜態網站。css

事前準備

雲服務器，（個人是阿里雲）html
碼雲或者 gihub （用來存放你的代碼）前端

事前配置

既然你有了雲服務器(我就當是你ubuntu 系統哦)，而後而且經過了備案，還有一個本身域名。那麼很好，該有的東西你已是有了，下面就一塊兒體驗配置的樂趣吧。nginx

第一步：mac 電腦直接經過下面的命令行鏈接到你的服務器。鏈接時候會叫你輸入密碼，輸入就是咯git

ssh root@127.22.20.121 //你的服務器公有 ip

鏈接成以後會有下面的一個界面，
web

這就能夠成功的登陸到你的服務器啦！數據庫

第二步：服務器上安裝 git和 Nginxexpress

安裝 git很簡單，在命令行模式下輸入sudo apt-get install git命令進行安裝。安裝完畢以後輸入git --version就能夠看到 git 的版本了；ubuntu
安裝Nginx 咱們能夠很容易地安裝Nginxsudo apt-get install nginx，Ubuntu 14.04默認狀況下，Nginx安裝完成後會自動啓動。你能夠訪問默認的Nginx登錄頁面，來確認軟件經過訪問你的服務器域名或瀏覽器公共IP正在正常運行。好比說你直接在瀏覽器輸入127.22.20.121,就會看到如下哪一個畫面。瀏覽器

正式部署

刀已經磨好了，下面咱們就霍霍向豬羊啦，首先本地建一個文件夾static-web-server而後在這個文件夾下面創建一個 index.html，這個 html咱們隨便寫點什麼的東西就行了。畢竟重心在部署。

下面是index.html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <title>nginx 靜態網站部署</title> 
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: #333;
            display: flex;
            justify-content: center;
            align-items: center
        }
        h1, a{
            color: #fafafa;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>nginx靜態網站部署實例<br/><a href="http://blog.naice.me/">naice blog</a></h1>
</body>
</html>

本地也東西也弄好，下面到來到碼雲上面創建一個新的倉庫，個人就叫static-web，而後把本地static-web-server的文件夾關聯到咱們碼雲static-web的倉庫，而且提交到倉庫上面，下面幾條命令就能夠了。

tips：提交代碼須要你的本地公鑰複製到碼雲的倉庫的設置上面哦，你們這個部分自行百度解決嘛。

git remote add origin git@git.oschina.net:naihe138/static-web.git（關聯本地文件夾和遠程倉庫，注意地址是你的地址哦）
git add .
git commit -m 'first'
git push -u origin master

上面的後面三點就是，添加到碼雲倉庫，相信你們都知道。
這會本地和倉庫都已經準備好了。下面來到服務器設置，鏈接到你的服務器

首先經過命令行新建一個 www文件夾

sudo mkdir /www

而後進入 www文件夾

cd /www

而後再新建一個文件夾叫static-web,而且進入這個文件夾裏面

sudo mkdir static-web
cd static-web

路徑是

pwd
/www/static-web

而後在static-web文件夾裏面，下載咱們剛纔上傳到碼雲的代碼。

git clone git@git.oschina.net:naihe138/static-web.git

tips: 這裏不能克隆到的，須要把服務器本機的公鑰添加到碼雲上面。這個有不少教程我就不細說了。

代碼都克隆到咱們的服務器了以後，下面咱們稍微配置一下 nginx 配置很簡單，跟着我就能夠了。進入到 nginx 配置目錄

cd /etc/nginx/conf.d/

經過 ls查看配置文件，（你以前沒有配置過，下面就是空的了），而後經過 vi 命令新建一個配置文件，例如：
sudo vi static-naice-me.conf （個人頂級域名是naice.me經過解析子域名 static.naice.me，因此就起了這個static-naice-me.conf 名字的文件），而後你就進入了一個 vi 編輯的環境，按下鍵盤的i 鍵，就能夠寫入內容，寫入如下內容

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

寫入內容以後，按下esc而後輸入:wq！來保存你編輯的內容。

退出以後咱們須要經過命令行重啓 nginx服務

sudo nginx -s reload

域名解析

域名解析是把域名指向網站空間IP，讓人們經過註冊的域名能夠方便地訪問到網站的一種服務，
下面簡單說說一下域名解析的操做，你擁有了一個域名而後，進入 dnspod,沒有的話帳號的話，直接註冊登陸，而後進到控制檯

添加域名
添加 a記錄

以下圖：

好了，咱們恰好剛剛把解析好的域名寫進去咱們的 nginx 的配置裏面，也重啓了 nginx 服務，下面就直接輸入 http://static.naice.me/，就能夠訪問到咱們剛纔寫的靜態網頁，是否是有點小激動？？

還有一種方式

就是能夠借用 Nodejs 來輸出頁面，而後在構建這個 Nodejs 項目的是，須要能渲染這些 html 文件，這個比較利於後期擴展，藉助 pm2 自動部署，好比增長數據庫，能夠用 koa express 來搭建一個網站，不一樣的路由，訪問你不一樣的後臺 html 文件，模板引擎可使用 ejs，這樣能夠兼容你的 html，不須要修改成其餘的模板格式。後面能夠詳細說說。

最後安利一下我的博客： http://blog.naice.me/

done