有些人可能不是使用 LAMP,可能是使用 node.js 架設網站,這邊就以 vite + react 以 Apache2 Service 導出。主要是透過將前端 build 成靜態頁面再由 Apache2 Server 代理。
先在專案執行,執行完成後會在該專案底下產出一個 dist 檔案。
sudo npm run build
接下來必須記得更改 owner!我的專案路徑為 /var/www/wxyz/
sudo chown -R www-data:www-data /var/www/wxyz/
再來就是 Apache2 設定檔的部分了
首先新增一個設定檔,這邊以 wxyz 為子域名為示範。
/etc/apache2/sites-available/wxyz.conf
內容再針對子域名做修改即可,DocumentRoot 及 Directory 位置必須填寫正確到 dist 檔案路徑。
# 80 -> 一律導到 HTTPS
<VirtualHost *:80>
ServerName wxyz.luckyfish.app
Redirect permanent / https://wxyz.luckyfish.app/
</VirtualHost>
# 443 正站
<VirtualHost *:443>
ServerName wxyz.luckyfish.app
DocumentRoot /var/www/wxyz/frontend/dist
SSLEngine on
SSLCertificateFile /etc/apache2/ssl/public.pem
SSLCertificateKeyFile /etc/apache2/ssl/private.key
Protocols h2 http/1.1
<Directory /var/www/wxyz/frontend/dist>
AllowOverride all
Require all granted
</Directory>
ErrorLog ${APACHE_LOG_DIR}/dev_error.log
CustomLog ${APACHE_LOG_DIR}/dev_access.log combined
</VirtualHost>
RedirectMatch 404 /\\.(svn|git|hg|bzr|cvs)(/|$)
最後要啟用剛剛所設定的 profile 設定檔,一樣根據檔名去啟動,就成功了!
sudo a2ensite wxyz
sudo systemctl reload apache2
最後要記得每次有執行 sudo npm run build,都要記得做 chown!避免可能出現權限問題。