波能 の Blog Linux,網站架設 Vite/React project 以 Apache2 Service 導出

Vite/React project 以 Apache2 Service 導出

2025 年 10 月 30 日2025 年 10 月 30 日| luckyfishoxoluckyfishoxo| 0 Comment | 下午 9:44
Categories:

有些人可能不是使用 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！避免可能出現權限問題。

Related Post