教你將本身的網站上線

剛開始學前端時留意到不少前輩都有本身的線上我的網站，那時就在想何時也能搭建我本身的線上網站。

此次藉着作畢設的機會，實現本身以前的一個心願 😁。

固然，在此以前你得有本身的域名和服務器，這在萬網和某寶上很容易解決。

首先鏈接並配置遠程服務器

因爲我用的是 mac，遠程鏈接 Linux ( CentOS ) 比較方便，因此雲服務器選擇的是 CentOS 系統。

在 mac 下只需直接打開終端 ( Terminal )，輸入 ssh username@ip 就能夠鏈接 CentOS ，這裏將 username 和 ip 換成你本身服務器的用戶名和 ip 地址便可。

鏈接成功後，安裝如下依賴:

• Nginx 是用 C 寫的，須要 gcc 編譯;

yum install gcc
複製代碼

• Nginx 的 Rewrite 和 HTTP 模塊會用到 PCRE；

yum install -y pcre pcre-devel
複製代碼

• Nginx 中的 Gzip 要用到 zlib；

yum install -y zlib zlib-devel
複製代碼

• 安裝 OpenSSL 用來安全通訊；

yum install -y openssl openssl-devel
複製代碼

其中 -devel 是 develop 開發包的意思。

• 安裝 Nginx

下載源碼包：

wget http://nginx.org/download/nginx-1.12.2.tar.gz
複製代碼

解壓源碼包：

tar -zxvf nginx-1.12.2.tar.gz
複製代碼

執行

./configure --prefix=/usr/local/nginx --with-openssl=/usr/local/openssl
make && make install
複製代碼

啓動 Nginx：

/usr/local/nginx/sbin/nginx
複製代碼

這時在瀏覽器地址欄輸入你的服務器 IP 地址應該能看到 Nginx 的歡迎頁面。

• 安裝 Github

yum install git   //首先安裝 github

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
// your_email@example.com  就是你本身的 github 郵箱；

// 而後會讓你連續兩次輸入自定義密碼，用來後面獲取 ssh key；

ssh-add ~/.ssh/id_rsa

cat ~/.ssh/id_rsa.pub
// 如今你會拿到一段 ssh-rsa 開頭 your_email@example.com 結尾的 key ，而後複製這段 key 去 github 裏添加 SSH key。
複製代碼

添加成功後運行： ssh -T git@github.com 檢測是否鏈接上，並詢問你是否繼續鏈接，輸入 yes 後回車便可看到一段鏈接成功的提示。

如今，你就能夠用 git clone 和 npm run build 命令來拉取和打包項目了。

解析和綁定域名，這個在你購買域名的頁面有很詳細的教程，因此就很少說了。

當你的域名就和 ip 地址綁定上後，在瀏覽器地址欄輸入本身的域名也會發現 Nginx 的歡迎頁面 👏。

Nginx 域名配置

進入本身的雲服務器輸入 vi /etc/nginx/conf.d/default.conf 打開 Nginx 的默認配置文件

• 在 server_name 裏寫上本身的域名，
• 在 root 後面寫上打包後的文件目錄，即 dist 文件夾所在目錄，
• 在 location 裏配置訪問路徑 / 和 index 頁面，這裏的 try_files $uri $uri/ /index.html; 是指 url 重寫。

寫好、保存後退出，輸入 service nginx restart 重啓 Nginx。

可能輸入域名後會顯示 403 報錯，這是權限配置不正確致使；

輸入 vi /etc/nginx/nginx.conf 指令進入 Nginx 配置文件

• 將 user nginx 修改爲 user root 賦予 Nginx root 權限，以後重啓 Nginx

若是仍舊 403 報錯，能夠試試這個方法：

• 將代碼文件移至 root 之外的其它目錄 ( 固然也要在 Nginx 的配置文件裏修改對應的 root 地址 )；
• 執行 chcon -R -t httpd_sys_content_t /srv/www/yoursite ( 這裏換成你的代碼文件目錄 ) 修改安全上下文。

這樣應該就能夠解決 403 問題了。

如今在瀏覽器地址欄裏輸入你的域名，是否是發現本身網站的首頁出如今眼前 🤗。

做爲一名前端開發者，能擁有本身的線上網站是件很 cool 的事情 😊 ，因此趕忙動動手，只需一些簡單的步驟就能讓本身的網站上線。

若是你喜歡這篇文章的話，不妨點個喜歡 ❤️ 或 關注 👀， 這將是我更大的動力 😃。