Vite, Valet 및 SSL을 함께 작동시키는 방법

헤이 👋

오늘 새 프로젝트를 만들기로 결정한 다음 새 laravel 프로젝트를 만들었습니다. 새 자산 컴파일러인 vite와 함께 제공됩니다.

하지만 내 프로젝트는 로컬 개발에 SSL이 필요하므로 vite가 SSL 및 laravel valet과 함께 작동하도록 해야 했습니다.

매우 새로운 릴리스이기 때문에 인터넷에서 이에 대한 내용을 많이 찾지 못했고 솔루션을 공유하기로 결정했습니다.

먼저 다음 명령을 사용하여 도메인에 이미 SSL이 있는지 확인합니다.

cd ~/Code/your-current-project
valet secure your-current-project

이제 브라우저에서 도메인이 인증서와 함께 작동하는지 확인하십시오.

해결책

마법은 Nginx 또는 Apache에서 만들 때 키와 인증서를 vite.config.js에 전달하는 것입니다.

파일 예시는 아래에서 확인하세요 👇

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

 const domain = "domain.test"; // add it
 const homedir = require("os").homedir(); // add it

export default defineConfig({
    plugins: [
        laravel({
            input: "resources/js/app.js",
            ssr: "resources/js/ssr.js",
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    // add this block
    server: {
        https: {
            key: homedir + "/.config/valet/Certificates/" + domain + ".key",
            cert: homedir + "/.config/valet/Certificates/" + domain + ".crt",
        },
        host: domain,
        hmr: {
            host: domain,
        },
    },
});

이 기사가 도움이 되었기를 바랍니다!