前端部署伺服器小結

williamslau發表於2018-07-09

在平時工作中對後臺有很多的疑惑,雖然前後端分離,但是也不能完全不懂後端的知識,所以在很早之前就像寫一個全棧的專案,自己跑一跑,這樣會對整個網站的研發過程有一個新的理解。

個人部落格呢,是一個功能明瞭,邏輯不是很複雜的小專案,非常適合用來練手。於是歷經三個月,從

node,到資料庫,到前端,邊學邊做,終於是搞出來了。

之所以做的這麼慢是怕所學的知識不紮實,所以看完node,看koa,看完koa看egg,因為egg是最新的庫,而且最近很火,所以就用egg.js了。

然後惡補linux的命令,發現資料庫的sql語句非常看不懂,於是就惡補mysql,又看了mongodb,最後決定用mongodb,因為語法簡直和js一樣。

前端使用的react,想法很簡單,因為工作中用的就是vue,已經很熟了,想再學學react,redux,學完redux以後對狀態管用有了新的認識,感覺之前用的vuex簡直就是模稜兩可,

部署伺服器讓我對linux命令的系統神祕感淡化了很多,其實只是入門的話,簡單的部署,安裝個nginx,git什麼的沒有那麼難,對於我這個非專業運維,完全夠用了。

後臺用的

egg.js

資料庫用的

mongodb+mongoose

前端用的

react+react-router-dom+redux

伺服器是用的阿里雲的,同時也用了阿里雲的oss物件儲存,以及域名,備案一套全都是阿里雲的,因為大品牌,值得信賴,而且備案反饋非常及時,兩天時間連拍照帶提交資料就已經提交通訊管理局了

系統選的Ubuntu系統,配置當然是最便宜的,如果新註冊阿里雲的童鞋可以領取新手上路里的免費使用6個月的伺服器:free.aliyun.com/?spm=5176.8…
是一個很好的學習機會

前端部署伺服器小結前端部署伺服器小結


用cmd連結伺服器的方法

ssh root@你的IP地址複製程式碼

部署前端程式碼我用的Xshell5,用法很簡單。

後端程式碼用的git push 再在伺服器上拉取。

然後建立使用者,這些其實都可以省略,但是再真實專案中一般都不會用

root賬號進行操作,總會給各個人員相應的賬號

建立賬號

adduser username複製程式碼

新增使用者到組

gpasswd -a username sudo複製程式碼

cat檢視檔案

cat /etc/sudoers(這個檔案是許可權的配置檔案)複製程式碼

cd到這個資料夾,開啟檔案

vi sudoers複製程式碼

然後將你的許可權新增進來

# User privilege specification
root ALL=(ALL:ALL) ALL
username ALL=(ALL:ALL) ALL (在這裡新增)
複製程式碼

接下來就可以用這個賬號來登陸了

ssh username@39.106.133.41複製程式碼

當然還有很多增強安全等級的方法

比如本地生成公鑰私鑰,把預設

22埠改為別的

本地生成公鑰和私鑰

ssh-keygen --help
cd ~/.ssh
ssh-keygen -t rsa -b 4096複製程式碼

把本地的公鑰上傳到伺服器授權檔案中

vi ~/.ssh/authorized_keys
chmod 600 ~/.ssh/authorized_keys
sudo service ssh restart複製程式碼

修改預設埠

vi /etc/ssh/sshd_configPort 2222        (在這裡修改埠)
AllowUsers usernamePermitRootLogin yes    (允許root賬號登陸,可以改為no)
PasswordAuthentication yes  (允許賬號密碼登陸,可以改為no)複製程式碼

下次登陸就要指定埠了

ssh -p 2222 username@你的IP複製程式碼

當你設定了公鑰以後,關閉了賬號密碼登陸以及root賬號登陸,再把埠好改了,這樣安全上基本上已經是目前為止能做到的極限了。

配置完了接下來就是安裝軟體的時候了

更新軟體列表

sudo apt-get update複製程式碼

安裝

wget curl git

sudo apt-get install wget curl git
複製程式碼

安裝nvm(node的包管理工具,可以下載多個node版本)

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash複製程式碼

裝好以後會提示應用指令碼,執行它才能完全的安裝完

source /root/.bashrc複製程式碼

安裝node

nvm install node複製程式碼

檢查是否安裝好了

node -v
npm -v
複製程式碼

安裝

cnpm(用cnpm用慣了,感覺npm下載太慢了)

npm i cnpm -g複製程式碼
linux 遇到的坑

列出子檔案

ls複製程式碼

這裡加入-a可以檢視隱藏檔案,比如vi的時候儲存沒儲存成功什麼的,可以ls -a 檢視到快取檔案,刪掉即可正常編輯

-l是檢視時間的

ls  -al (檢視隱藏問價以及列出最後編輯時間)複製程式碼

vi編輯檔案

首先要按一下i進入編輯模式

編輯完了按esc退出編輯後:wq 儲存

有時會遇見衝突,或者許可權問題

許可權問題在命令前面加上sudo就好

:q      //不儲存檔案退出
:q!     //不儲存檔案強制退出
:wq     //儲存檔案並退出
:wq!    //強制儲存檔案並退出
複製程式碼

目錄下

ls -a可以檢視到未編輯完的檔案,刪除 rm 檔名 rm -rf慎用(r遞迴f強制刪除)

mv移動檔案或者重新命名
複製程式碼

如果你是普通node服務可以下載pm2守護程式

開啟伺服器

pm2 start app.js --name 'username'    //起個別名複製程式碼
刪除服務

pm2 delete username複製程式碼

最後部署完感覺做的不是很順溜於是就從新的格式化了一下阿里雲
結果報錯

WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!

前端部署伺服器小結

是因為有公鑰執行

ssh-keygen -R 172.16.152.209複製程式碼

Host 39.106.133.41 found: line 3複製程式碼

證明刪了三個公鑰

從root啟動服務,再用nginx轉發nginx

Nginx是一個高效能的HTTP和反向代理伺服器,也可以新建埠

安裝

apt-get install nginx複製程式碼

檢視nginx狀態

service nginx configtest複製程式碼

nginx配置檔案全在/etc/nginx下

檢視

cat nginx.conf複製程式碼

配置服務代理

/etc/nginx/sites-enabled複製程式碼
下新建檔案

代理埠

upstream web{
    server 39.96.114.57:3000;
}
server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html; // 檔案存放位置
    index index.html index.htm; //檔案優先順序
    location / {
        proxy_pass http://web;
    }
}
複製程式碼

nginx 新增埠

server {
        listen 8080;
        server_name 39.106.133.41;
        root /usr/share/nginx/blog;    (這裡是新建的資料夾)
        index index.html index.htm;
}複製程式碼

配置伺服器叢集

upstream webserver{
    server 39.106.133.41:8080;
    server 39.106.133.41:8090;
}
server {
    listen 80;
    server_name 39.106.133.41;
    location / {
        proxy_pass http://webserver;
    }
}複製程式碼

nginx命令

名稱

命令

啟動nginx

nginx -c /etc/nginx/nginx.conf

關閉 nginx

nginx -s stop

重讀配置檔案

nginx -s reload kill -HUP nginx

常用命令

service nginx {start|stop|status|restart|reload|configtest}

安裝

mongodb

wget http://.../mongodb.tgz複製程式碼

這裡可以去官網找相應的版本

我將mongodb安裝到了/user/local中,

data資料夾和log資料夾放在了var中

下載完以後解壓,再裡面找到bin/mongod這個就是啟動檔案了

啟動mongodb

mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork複製程式碼

如果是

react或者vue專案,打包上傳到相應的nginx裡面

一開始腦洞很大,總感覺egg的部署摸不著頭腦,又不能像react一樣build打包。

egg的話可以用git,就像平時上傳程式碼一樣,再cnpm i安裝依賴

egg官方文件寫的很明白,有自帶的進城守護。

開啟伺服器

npm start複製程式碼

關閉伺服器

npm stop複製程式碼

修改好egg的響應代理配置以及埠配置,整個伺服器就搭建好了,搭建完的第一感覺就是Linux的系統操作的也是檔案和資料夾,並無其他的神馬何方神聖,也沒有我自己認為的那麼難了


相關文章