Laravelでexpose、Viteを使ってサイトを公開する方法

2023年12月29日

Laravelは開発環境が充実していて便利ですよね。

valetやherdを使えば、ローカルでの開発環境をすぐに整えることができます。

valetとherdともにshareというコマンドがあり、これを利用すると外部URLにローカルサイトを公開することができます。

ただ、これは一般的に現状のサイトを共有する目的が強く、外部から開発するための使われ方は説明されていません。

今回はexposeで公開したサイトを開発に利用するための設定をご紹介します。

私はherdを使っていますので、まずはherd shareを使ってサイトを公開します。

herd share

*exposeの設定は割愛しています。

Laravel breezeなどを使って構築すると、フロントの開発・ビルドはViteを利用していることがほとんどかと思います。

フロント開発のために以下のコマンドで起動しておきます。

npm run dev

この時点でアクセスすると、真っ白の画面が表示されてしまいます。

2つほど問題が起きているので1つずつ解決していきます。

デベロッパーツールなどで確認すると、以下のようなエラーが発生していることがわかります。

GET http://0.0.0.0:5173/@vite/client net::ERR_ADDRESS_INVALID

これを回避するにはvite.config.jsに以下を追加します。

server: {
    host: '0.0.0.0',
    hmr: {
        host: 'localhost'
    }
},

上記の対策で真っ白の画面は避けられるようになりましたが、リンクにアクセスするとエラーが発生し、遷移できないことに気づきます。

同じようにデベロッパーツールで確認すると、アクセスしているURLがhttpのままで、mixed contentsによるエラーが発生していることがわかります。

AppServiceProviderのbootメソッドを次のように書き換えます。

ただし、この設定はローカルで開発する時も強制的にhttpsにしてしまうので注意が必要です。

public function boot(UrlGenerator $url)
{
    $url->forceScheme('https');
}

私の開発環境は、自宅にあるPCをメインの開発サーバーとして、普段持ち歩くMabook Airをクライアントとして利用しています。

そうすることで、クライアント側はそこまでのPCスペックがなくても開発をすることができます。

ただ、チームメンバー全員がその形で開発しているわけではないので、先ほどご紹介したhttpsの強制化は他のメンバーの環境に影響を与えてしまいます。

ソースコードにハードコーディングされているのは微妙ですが、.envのAPP_ENVを変えることで対応したりしています。

public function boot(UrlGenerator $url)
{
    if (env('APP_ENV') === 'expose') {
       $url->forceScheme('https');
    }
}

金井泰樹 FUNBREW代表

FUNBREWの代表。
新卒からIT系の企業に勤め、SES、スマホアプリ開発、自社開発の会社で経験を積んで独立。
新卒時代にエンジニアとしてのキャリアを積むのに失敗し、その後に苦労した経験から、現在教育事業の立ち上げを準備中。
強みはウェブシステム開発全般と迅速なレスポンスです。

関連記事