はじめに
タイトル通り、常にEC2上で作業し続け、Vue.jsの初期画面を表示するまでの手順を整理したものです。
参考文献
サーバの環境構築
Node.jsとnpmのインストール
以下のコマンドを順に実行していく。
curl -fsSL https://deb.nodesource.com/setup_22.x -o nodesource_setup.sh
sudo -E bash nodesource_setup.sh
sudo apt install -y nodejs
インストール確認としてバージョン表示を行う。
node -v
npmのインストールは、nodejsと一緒に行われるっぽい（自分の環境ではそうだった）。
バージョン確認でインストールをチェック
npm -v
これでもしバージョンが表示されなかったら、以下のコマンドでインストールする。
sudo apt install -y npm
Vue.jsのインストール
最初に作業ディレクトリへ移動する。
cd /var/www/html/
sudo mkdir vue-test
cd vue-test
その後、インストールコマンドを実行する。
sudo npm create vue@latest
実行するとプロジェクト名を聞かれるので、テキトーに入力する。
（記事内ではvue-projectとする）
その他、いくつか聞かれるので、適宜選択して進める。
基本的にはNOでOK。
インストールが終われば、以下のようなコマンド指示が出るので実行する。
cd vue-project
sudo npm install
最後のnpm run devについては、実行しなくてもOK。
これでVue.jsの環境構築も終了。
ページの表示
プロジェクトのビルド
表示するためにはビルドが必要なので、以下のコマンドを実行する。
sudo npm run build
これにより、./distの中にビルドされたファイルが作成される。
ページを表示させる
これらを任意の場所に移動させよう。
sudo cp -r dist/* /var/www/html/vue-test
あとはhttp://<your domain>/vue-test/index.htmlにアクセスすれば表示される。
・
・
・
はずが、なぜか真っ白なページが表示される。
原因はindex.htmlの記述。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
<script type="module" crossorigin src="/assets/index-B_pMlDuz.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DHqK1tyo.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
これの7,8行目の指定が正しくないので、以下のように修正する必要がある。
分かりにくいが、src=./assets/...、href=./assets/...のように.を足している。
<script type="module" crossorigin src="./assets/index-B_pMlDuz.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-DHqK1tyo.css">
これでページ再読み込みすると、以下のようなVue.jsの初期画面が表示される。
さいごに
最後の表示させるための修正はビルドのたびに必要なので注意。
その辺上手くやる設定があればコメントなどで教えて下さい。