Vuetify BootCamp

Appearance

重要：如果不是部屬在根目錄要先在 vite.config.js 調整好 base

編譯 ​

bash
npm run build
npm run build

伺服器設置 ​

編譯後丟上伺服器，伺服器需要

  1. 設置提供 index.html (設定當路由符合規則時，依序嘗試回傳設置的內容。)
  2. 反向代理(Optional) (透過 config 或手動設置)

提供 index.html ​

反向代理 ​

IIS 部屬設置 ​

  1. IIS 必須有安裝 URL Rewrite Module、Application Request Routing，反向代理好像要從 server 端手動設置？
  2. 轉為應用程式
  3. web.config 設定：
xml
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
				<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
				  <match url="(.*)" />
				  <conditions logicalGrouping="MatchAll">
					<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
					<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
				  </conditions>
				  <action type="Rewrite" url="index.html" />
				</rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
				<rule name="Handle History Mode and custom 404/500" stopProcessing="true">
				  <match url="(.*)" />
				  <conditions logicalGrouping="MatchAll">
					<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
					<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
				  </conditions>
				  <action type="Rewrite" url="index.html" />
				</rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Nginx 部屬設置 ​

重點是 try_files，try_files 只能運行於 server, location

nginx
# Typically I use this file as a boilerplate to configure an nginx docker container
#
# This goes in /etc/nginx/conf.d/default.conf
# If you are reverse proxying an API
# 通常我使用這個文件作為配置Nginx Docker容器的範本
#
# 這個配置應放在/etc/nginx/conf.d/default.conf中
# 如果您正在反向代理一個API
upstream api {
	# 這裡設置 api
    server someapi.ktgh.com.tw:443;
}
server {
    listen 80; 
	# server_name yoursite.org;
	root /usr/share/nginx/html;
    location / {
		try_files $uri /index.html;
    }

    # 開啟 gzip 加速傳輸
	gzip on;
	gzip_types text/html application/javascript application/json text/css;

	# 反向代理
    location / {
        proxy_pass https://api/; # Backend server address
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Real-IP $remote_addr;

        # Optional: Additional proxy settings
        # proxy_connect_timeout 5s;
        # proxy_read_timeout 60s;
        # proxy_send_timeout 60s;

        # Optional: Enable WebSocket support
        # proxy_http_version 1.1;
        # proxy_set_header Upgrade $http_upgrade;
        # proxy_set_header Connection "upgrade";
    }
}
# Typically I use this file as a boilerplate to configure an nginx docker container
#
# This goes in /etc/nginx/conf.d/default.conf
# If you are reverse proxying an API
# 通常我使用這個文件作為配置Nginx Docker容器的範本
#
# 這個配置應放在/etc/nginx/conf.d/default.conf中
# 如果您正在反向代理一個API
upstream api {
	# 這裡設置 api
    server someapi.ktgh.com.tw:443;
}
server {
    listen 80; 
	# server_name yoursite.org;
	root /usr/share/nginx/html;
    location / {
		try_files $uri /index.html;
    }

    # 開啟 gzip 加速傳輸
	gzip on;
	gzip_types text/html application/javascript application/json text/css;

	# 反向代理
    location / {
        proxy_pass https://api/; # Backend server address
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Real-IP $remote_addr;

        # Optional: Additional proxy settings
        # proxy_connect_timeout 5s;
        # proxy_read_timeout 60s;
        # proxy_send_timeout 60s;

        # Optional: Enable WebSocket support
        # proxy_http_version 1.1;
        # proxy_set_header Upgrade $http_upgrade;
        # proxy_set_header Connection "upgrade";
    }
}

Refernece ​