ポートを開ける
ログイン後、vpsをクリック。
Networkingタブを選択して、以下のportをオープン。
IPV4,IPV6の両方とも開ける。
Custom TCP
4173
Custom TCP
5173
Custom TCP
8000
サーバーのIPアドレスを確認
aws lightsailは2つのIPがあり固定するシステムだが、
今回利用するのは、このIP。
あとで表示される、このIPとは違うので注意！
vite に host名を指定
const host = 'your.com';
export default defineConfig({
server: {
host: true,
hmr: {
host: host,
},
},
ターミナルを開く
リモート接続も可能。
1 laravelのサーバーを開く
php artisan serve --host=0.0.0.0
2 vite サーバーを開く
npm run dev
ブラウザで確認
先程確認したIPアドレスにアクセス。
laravel の方にアクセスするのが正解。
http://12.345.88.204:8000/
テスト環境を作る
※強引な方法なので、良い方法あれば教えてください❤
npm run dev をやると、本番環境のドメインまでテストファイルを読み込みに行ってしまう。よって、npm run dev をやっても、本番ドメインにアクセスしているなら、最後にbuildされたファイルを読み込むようにする。
(SSLじゃないので注意)
http://your.com:8000 にアクセス
=> 開発用コードを利用
https://your.com にアクセス
=> 最後にbuildされたファイルを利用
と分ける。
vue.blade
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<? if ($_SERVER['SERVER_PORT'] != 8000): ?>
<?php
$domain = "your.com";//要変更
$json = file_get_contents("../public/build/manifest.json");
$json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
$ar = json_decode($json,true);
$tag = "";
$js = [
'modulepreload' => '',
'module' => ''
];
$css = [
'preload' => '',
'stylesheet' => ''
];
foreach ($ar as $key => $v) {
if(strpos($v['file'],'.css') === false){
$js['modulepreload'] .= '<link rel="modulepreload" href="https://'.$domain.'/build/'.$v['file'].'" />';
$js['module'] .= '<script type="module" src="https://'.$domain.'/build/'.$v['file'].'"></script>';
} else {
$css['preload'] .= '<link rel="preload" as="style" href="https://'.$domain.'/build/'.$v['file'].'" />';
$css['stylesheet'] .= '<link rel="stylesheet" href="https://'.$domain.'/build/'.$v['file'].'" />';
}
}
$tag = $css['preload'] . $js['modulepreload'] . $css['stylesheet'] . $js['module'];
echo $tag;
?>
<? else: ?>
@vite(['resources/css/app.css', 'resources/js/app.js'])
<? endif; ?>
</head>
<body>
<div id="app">
<app-component></app-component>
</div>
</body>
</html>