はじめに

タイトル通り、常に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の初期画面が表示される。

さいごに

最後の表示させるための修正はビルドのたびに必要なので注意。
その辺上手くやる設定があればコメントなどで教えて下さい。