全篇比較啰嗦,可以酌情選擇對自己有幫助的看。
1.購買一個服務器
有服務器的可以自行跳過哈。
有閑置電腦的話也可以,具體的可以自己找找看,我這篇主要說網上的雲服務器。
不過這幾天阿里雲有活動,大學生免費送半年ECS服務器,前提是原來沒有ECS服務器,如果原來有輕量應用服務器的話也是可以再領的(正好到期了,不用續費了哈哈哈),
如果不是學生的話,只能自己購買了,購買的話基本是傻瓜式的,不解釋了。可以自己從任何地方買。
阿里雲ECS服務器購買:https://www.aliyun.com/product/ecs
系統的話本篇是Ubuntu 16.04.6 ,centos也行,大同小異都是Linux。不過如果你是初學者,最好和我使用一樣的,因為因為發行版本不同而導致的差異可能導致運行某些東西失敗,找問題要找好久。windows server不推薦了,企業用的多,小服務器跑windows server比較費勁。
具體區別:https://www.linuxprobe.com/ubuntu-comparison-centos.html
1.1購買域名
域名可買可不買,就是方便記憶你的網址,沒有什么實質的用處。
我選擇的萬網,地址給你們,自己看着挑,反正不是很貴。
也是阿里系的,所以和阿里雲的主機配置起來相對方便一點。購買好了在你的DNS域名解析的網站上將你的域名綁定相應的服務器ip即可實現輸入域名對接ip。
dns域名解析服務:https://dns.console.aliyun.com/
2.服務器配置
2.1 連接服務器
首先如果你購買了雲服務器的話裝完系統的話,需要用本地機器進行連接。
首先打開你的終端或者cmd之類的,用ssh命令連接你的服務器。
$ ssh root@123.123.123.123
123.123.123.123
就是你的服務器的公網Ip,怎么找呢?
阿里雲舉例 首先登陸,然后找到控制台,如果你之前用過ECS服務器的話,在你最近使用過的產品下會有一個 雲服務ECS
的標簽,點擊它你就可以看到你的雲服務器實例。在ip地址欄就有他的公網ip和私網Ip了。
那么有人就會問了,公網Ip和私網ip有什么區別呢?大體來說就是你要是通過互聯網來訪問某台主機,只能用公網ip,私網只能用於局域網內。
等待片刻會讓你輸入password,直接輸入在你配置服務器時候的密碼即可,輸入時並不會顯示你輸入的啥,表面上是沒動靜的,所以你只管輸入就行了,輸入完了回車,即可進入服務器
2.2 ssh設置
當然你可以選擇新建用戶,然后直接用這個用戶登錄(ssh 你的用戶@公網ip
,之前用root登錄是因為現在服務器里只有root用戶),可能涉及到一些安全問題,不過作為個人服務器不設置也行,所以不敘述了。
如果對安全有需要的同志們看一下阮一峰的那篇博客
<Linux服務器的初步配置流程>:http://www.ruanyifeng.com/blog/2014/03/server_setup.html
不過每次輸入密碼真的挺麻煩的,所以可以用SSH秘鑰來免登陸,這里只敘述mac系統的,windows的不太了解。如果你不嫌麻煩同時對安全性沒有什么要求的話這一步一樣可以忽略。
-
首先你可以在本機終端中輸入
ssh-keygen
命令來生成公鑰和私鑰$ ssh-keygen -C "你想在這輸什么都行,這就是一段描述,一般套路是你的郵箱"
你要是不喜歡的話甚至也可以不加
-C
,你在別的教程里看的-t rsa也可以不加,因為不加也是生成rsa格式的。 -
接下來讓你輸入文件名,這步可以不輸入,不輸入之后默認的文件名是
id_rsa
和id_rsa.pub
-
接下來讓你輸入密碼,同樣可以不輸入。
-
接下來你就會看到,你的用戶目錄里會出現
.ssh
的文件夾(默認隱藏了,需要command+shift+句號鍵 才可以顯示),然后你會看到這個文件夾里有id_rsa
和id_rsa.pub
-
登錄服務器,然后在你的用戶目錄里新建一個.ssh的文件夾,然后新建一個
authorized_keys
的文件,默認你現在正在用root用戶。$ cd /root $ mkdir .ssh $ vim authorized_keys
-
然后進入vim的界面,還記得你的id_rsa.pub嗎?在本地主機,你隨便用什么打開他(例如sublime),把這個文件的內容復制,然后粘貼到服務器的vim里,然后嗯ESC鍵退出編輯模式,然后用大寫的ZZ可以保存退出文件,或者你也可以輸入
:wq
來保存退出文件。講的比較通俗,你也可以用
ssh-copy-id
或者cat ~/.ssh/id_rsa.pub | ssh bill@128.199.209.242 'mkdir -p .ssh && cat - >> ~/.ssh/authorized_keys'
這樣看起來比較高端的操作來執行,但是我估計會用的不會看我這篇博客。 -
然后,重啟SSHD。
$ sudo service ssh restart 或者 $ sudo /etc/init.d/ssh restart
-
接下來退出你的服務器,輸入
exit
或者logout
或者直接關閉終端都可以。 -
接下來再用ssh命令登錄你的服務器,你會發現不用輸密碼了。
2.3 配置環境
- 用apt-get install安裝常用的工具,具體不解釋了,可以都選擇裝,想深入了解的可以百度一下下面都是些什么東西。
$ sudo apt-get install vim openssl build-essential libssl-dev wget curl git
-
接下來用wget安裝nvm,nvm是node.js一個node版本管理工具,可以安裝也可以切換來切換去的
nvm ls-remote
:列出所有可以安裝的node版本號
nvm install v12.16.1
:安裝指定版本號的node
nvm use v12.16.1
:切換node的版本,這個是全局的
nvm current
:當前node版本
nvm ls
:列出所有已經安裝的node版本 所以可以先用
nvm ls-remote
來檢查一下最新的版本,推薦安裝最新的LTS版本,然后用nvm install v12.16.1
來進行安裝,因為用的國外的網,下載可能有些慢,需要耐心等待。 -
然后你就可以用熟悉的npm安裝各種各樣的工具了,直接按照下面的裝就好了。
$ npm i pm2 webpack vue-cli -g
-
接下來就是安裝nginx
$ sudo apt-get install nginx
ngnix是啥玩意待會再說,你先安你的。
-
如果你的項目包含后端代碼,再打包好了需要安裝mongdb,redis或者mysql的之類的數據庫服務的話,可以自行去百度。這里不再贅述了。
3.nginx配置
3.1簡述原理
簡述一下nginx的原理,如果你直接通過瀏覽器訪問你的公網Ip或者域名的話,不會出現任何東西,因為你什么東西都沒往上擱。
如果你放了個vue項目,在服務器上跑,你知道如果這個項目在本地上跑,你可以通過127.0.0.1:3000或者localhost:3000來訪問你這個項目。
但是如果你把項目放到服務器上跑,我怎么通過127.0.0.1這個地址來訪問服務器呢?答案是不能,因為這是個回環ip地址,只能指到本機,而本機沒有運行這個項目。
那么我怎么來訪問服務器上的項目呢?所以nginx就來了,他能通過反向代理,將你輸入的123.123.123.123:80地址指向他本機運行的127.0.0.1:3000。這樣你只需要在瀏覽器上輸入123.123.123.123,然后就會出現你剛剛在服務器上跑的vue項目。
3.2配置開始
我們進入/etc/nginx/sites-enabled/
中,用vim編輯default
文件
$ cd /etc/nginx/sites-enabled/
$ vim default
然后你把你能看到的不帶#號注釋的都刪掉,換成我下面的東西,然后你就可以執行你的默認3000端口的代碼了,其他的配置項很多,我只給你能簡單運行的代碼哈,其他的自行查閱文檔或者看別的博客,我就不展開了。
nginx 中文文檔:https://www.nginx.cn/doc/
upstream nuxt{
server localhost:3000;
}
server {
listen 80;
server_name _;
location / {
proxy_pass http://nuxt;
}
}
然后執行sudo nginx -t
看是否語法或者配置有無硬傷,然后如果顯示successful的話,就執行sudo nginx -s reload
重啟nginx服務。這樣最簡單的代理就完事了。
4.打包上傳運行項目
4.1打包上傳
首先如果你的nuxt.js項目包含后端的話,而且你請求的地址是類似this.$axios.post("/message/upload",{})
這樣的話,要先把plugin目錄下的axios.js 配置一下,保證在服務器上運行的時候發送的地址正確。
export default function({ $axios, redirect }) {
$axios.setBaseURL("http://公網ip");
}
並且保證在nuxt.config.js上有標注用到這個pulgin
module.exports ={
// ...
plugins: ["@/plugins/element-ui", "@/plugins/axios"]
// ...
}
然后我們運行npm run build
然后會自動給我們打包好相應的文件,我們需要復制到服務器的是
.nuxt
package-lock.json // 如果有的話
package.json
nuxt.config.json
static
server // 如果你的項目中有后端的話
然后按道理將他們復制進服務器的/www/項目名
文件夾內
復制步驟可以通過forklift這樣的客戶端或者sftp,lrzsz命令來操作。
不贅述了,給個博客自行研究
三種方式實現Linux的文件上傳下載:https://blog.csdn.net/weixin_37490221/article/details/80844825
我的操作方法就是直接下載一個forklift,然后通過command+k
來進行與服務器sftp鏈接,一拖一拽就行了。比較方便。
然后進入我們剛才在服務器新建的/www/項目名
中,執行npm install
安裝依賴即可。然后我們待會啟動項目。
4.2 pm2 守護進程
服務器嘛,當然要一直跑,如果偶遇崩潰啥的在上面跑進程的就中斷了,所以需要pm2這樣的程序來守護你所執行的進程,如果遇到崩潰可以自動重新進行重啟。而且這個玩意可以再不用配置的情況下啟動多進程,同時運行注入mongdb,redis和你的web應用。
剛才再配置環境時已經安裝了pm2,我們還是進入我們剛才在服務器新建的/www/項目名
中,執行
$ pm2 start npm --name "my-nuxt" -- run start
另附一些常用的pm2操作
查看所用已啟動進程:
$ pm2 list
重啟某一個進程:
$ pm2 restart XXX
停止某一個進程:
$ pm2 stop XXX
刪除某一個進程:
$ pm2 delete XXX
然后我們就能愉快地打開瀏覽器訪問我們的網站了。