Ricky 叩叮俱樂部

在開始之前，先來杯長島冰茶吧～

0%

Ubuntu 18.04 LTS+Vue-CLI+Ngnix/Apache

發表於 更新於 分類於

前言

自從後台架設完畢後
緊接著要幫前端同事把Vue給搬至Server
如此一來整個專案就能順利上線了～

不過即便如此也熬了一陣子的撞牆期
因為網路上的教學文章實在太多
每一篇都大同小異又有些微的不同
因此決定實際演練並趕緊記錄下來
這樣未來需要時就不會花太多時間走冤望路了

那話不多說
一起來看是如何操作的吧

Ubuntu

這邊使用的是GCP平台，因此在建立Ubuntu時可先賦予root密碼

1
$ sudo passwd root

可切換至root帳號

1
$ su -

這樣在操作下列步驟時，執行指令前就不用另外加sudo

Node.js

更新APT

1
$ sudo apt-get update

添加PPA，這裡的版本為_14.x，你也可以選擇其他適合的版本

1
$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

系統會根據PPA自動安裝Node.js 、 npm及其他相關套件

1
$ sudo apt-get install nodejs

查看版本

1
2
3
4
5
$ node -v
v14.9.0

$ npm -v
6.14.8

Vue-CLI

安裝Vue-CLI

1
2
$ sudo npm install -g @vue/cli
$ sudo npm install -g @vue/cli-init

查看版本

1
2
$ vue -V
@vue/cli 4.5.4

切換至存放專案目錄，這裡可自行選擇，我一般習慣放置在/var/app裡

1
2
$ mkdir /var/app
$ cd /var/app

建立專案

1
$ vue init webpack <project>

根據提示選擇即可
vue_init.png

切換至剛剛建立的專案目錄，然後打包專案

若是現有的專案可直接git clone到目錄下，再執行以下指令

1
2
3
$ cd <project>
$ npm install
$ npm run build

接著可以在目錄底下看到dist這個資料夾就代表打包完成

Ngnix

安裝Ngnix

1
$ sudo apt-get install nginx

查看服務狀態

1
$ service nginx status

打開瀏覽器直接輸入http://<server_ip>/就可以看到Nginx的歡迎頁面
nginx_welcome

根據/etc/nginx/nginx.conf我們可以知道設定檔放置在這兩個地方

1
2
3
4
5
6
7
...
http {
	...
	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
}
...

Nginx預設的做法會先將設定檔放置/etc/nginx/sites-available
再經由軟連結將檔案綁定至/etc/nginx/sites-enabled
而我們同樣依照它的流程先新增自定義設定檔

1
$ vim /etc/nginx/sites-available/<project>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
server {
    listen 80;
    server_name localhost;
    root /var/app/<project>/dist;
    location / {
    	index index.html;
    }
    error_page 404 /404.html;
    location = /40x.html {
    }
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }
}

建立軟連結

1
$ ln -s /etc/nginx/sites-available/<project> /etc/nginx/sites-enabled/<project>

刪除預設設定檔的軟連結

1
$ rm /etc/nginx/sites-enabled/default

測試設定檔配置並重啟

1
2
$ nginx -t
$ service nginx reload

接著重新打開瀏覽器並輸入http:<server_ip>/就可以看到熟悉的Vue歡迎頁面
vue_welcome.png

補充

在研究過程中耗費我最多時間的其實是設定檔的配置，由於我對Vue-cli的理解還不夠熟悉
裡頭有一些參數還不瞭解作用為何，也不太清楚Vue-cli的router是如何運作
因此雖然以上的配置可以讓專案運行，但不代表是完全正確的
這部分我還要再琢磨一番後才能寫得更詳細，而以下是我實際專案的配置
location的部分和原來有些許的不同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
server {
    server_name  easylunch.today;
    root         /var/app/lunch/dist;
    location / {
        try_files $uri $uri/ @router;
        index index.html index.htm;
    }
    location @router {
        rewrite ^.*$ /index.html last;
    }
        
    error_page 404 /404.html;
    location = /40x.html {
    }
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
    }
}

Apache

Apache其實也是同樣的做法，只是換了一個Web Server而已～

安裝Apache

1
2
sudo apt update
sudo apt install apache2 libapache2-mod-wsgi-py3

開機自動啟動Apache

1
$ sudo systemctl enable apache2

至/etc/apache2/sites-available/vue.conf新增下列設定

1
$ vim /etc/apache2/sites-available/vue.conf
1
2
3
4
5
6
7
8
9
10
11
<VirtualHost *:80>
    DocumentRoot /var/app/<project>/dist
    ServerName localhost

    <Directory /var/app/<project>/dist>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

</VirtualHost>

可使用vi/Vim取代：:%s/<SEARCH_FROM>/<REPLACE_TO>/g

啟用自訂設定 & 關閉預設設定

1
2
3
$ sudo a2ensite vue.conf
$ sudo a2dissite 000-default.conf
$ sudo service apache2 reload

接著重新打開瀏覽器並輸入http:<server_ip>/就可以看到熟悉的Vue歡迎頁面
vue_welcome.png