Random Virtual World 2022 🌸

インストール

WSL の上で作業してください。
まず緑色の Code > Download ZIP から DL して、好きな場所に置いてください。その後、カレントフォルダで下記コマンドを実行してください。

# ./package.json の "dependencies", "devDependencies" にあるコマンドをインストール
npm install

localhost にサーブする方法

開発モードでサーブ

localhost:3000 にてサーブされる。

# ./package.json の "scripts" の "dev" にあるコマンドを実行せよ、の意
npm run dev

製品モード・Node.js hosting (Heroku など) モードでサーブ

localhost:3000 にてサーブされる。 Heroku にデプロイしているので、今回はこっち。

npm run build
npm run start

(製品モード・Static hosting (GH Pages など) モードでサーブ)

localhost:3000 にてサーブされる。

# dist フォルダにファイル群を生成
npm run generate
# localhost にてサーブする
npm run start

Firestore, Firebase Storage の設定

詳しくは Firebaseでデプロイしよう！ を参照。

# `firebase` コマンドのインストール
npm install -g firebase-tools
# Firebase にログイン
firebase login

Heroku にデプロイ

初回設定

アカウントを作った後、公式解説 Getting Started on Heroku with Node.js に従い、以下を実行。

heroku login
# `rvw2022s` は自分の Heroku プロジェクト名に変更してください
heroku git:remote -a rvw2022s

以降はこれを実行

git add --all
git commit -m "Test heroku"
git push heroku master  # Heroku にデプロイ
# git push origin master  # Github にデプロイ

技術スタック

• NuxtJS Vue.js のフレームワーク
• Tailwind CSS / キーを押すと、クラスで検索できます。
• @nuxtjs/tailwindcss NuxtJS アプリケーションに Tailwind CSS を手軽に導入できる。
• Firebase Firestore, Firebase Storage を DB として使っています。
• Heroku Node.js hosting である Heroku でホスティングしています。
• vue-awesome-swiper スライドショー機能

参考文献

• Making a Navigation Drawer/Sliding Sidebar with TailwindCSS components/TheNavbar.vue で使いました。
• Multi Section Form | Tailwind Toolbox pages/submit.vue, pages/update.vue で使いました。
• Tailblocks components/TheSlides.vue で使いました。

License

これらのコードは CC0 で許諾されています。すなわち、商用利用・非商用利用を問わず、引用元に記載せずに、これらのコードの一部または全部を使用できます。