2023.12.27 Web制作

カップ麺の出来上がりを待っている3分間でVercelにViteプロジェクトをデプロイする

 

どうも、好きなカップ麺は「カップヌードル トムヤムクンヌードル」です🍜
今回は、そんなカップ麺が出来上がるおおよそ3分間で、ViteプロジェクトをVercelへデプロイしてWWW（ワールド・ワイド・ウェブ）へ公開しちゃいたいと思います。

Viteプロジェクトを作成する

コマンドをﾊﾟﾊﾟｯと入力してViteプロジェクトを作成します🫵
https://vitejs.dev/guide/#scaffolding-your-first-vite-project

npm create vite@latest

いろいろ聞かれますが、適当に選択していきます。
今回はVueプロジェクトを選択してみました😃

プロジェクトが無事に作成できたら、表示されている通りにコマンドを実行します🔡

cd cup-noodle
npm install
npm run dev

localhost:5173にアクセスすると、無事にViteプロジェクトが立ち上がっていることが確認できました🥳

Gitリポジトリを作成する

今回はGithubでリポジトリを作成します🤫

適当なリポジトリ名を入力して、「Create repository」をﾎﾟﾁっとします👇
今回はプライベートリポジトリを作成しました🔑（アカウントのsshの設定が必要になりますが、そのあたりの説明は割愛します）

リポジトリにviteプロジェクトをプッシュする

さきほど作成したリポジトリへプロジェクトをﾌﾟｯｼｭします。
今回はコマンドラインから下記の通りに実行してみます✋

git init
git add .
git commit -m "🎉 Initial commit"
git branch -M main
git remote add origin git@github.com:user-name/cup-noodle.git
git push -u origin main

今回はプライベートリポジトリなのでsshのURLを指定していますが、パブリックリポジトリの場合はHTTPSのURLを指定して問題ありません😶

git remote add origin https://github.com/user-name/cup-noodle.git

各URLに関してはリポジトリのトップページにある下記を参照してみてください👀

リポジトリにファイルの一覧が反映されたら完了です📋

Vercelへデプロイする

「Add New」から「Project」を選択して、新しいプロジェクトを作成します✨

リポジトリのインポート先を聞かれるので、適宜選択します。今回はGithubでリポジトリを作成したのでGithubを選択します👆
Githubとの連携が完了するとリポジトリ一覧が表示されますが、デプロイしたいリポジトリが表示されていない場合もあります😶‍🌫️

その際は、下にある「Adust Github App Permissions」のリンクを押下して、連携するリポジトリを選択して「Save」します✅

「All repositories」を選択して、すべてのリポジトリを許可しても問題ないと思います💡

「Save」したあとにリポジトリ一覧の画面に戻ると、先ほど追加したリポジトリが追加されている・「Import」のボタンが押せるようになっているので、デプロイしたいリポジトリの「Import」を押下します👇

設定画面に遷移すると、自動的にViteプロジェクトであることを認識してコマンドや出力先のフォルダ名などが設定されているのが確認できます。ｽｺﾞ❗

そして、その下にある「deploy」ボタンを押すと・・・😏

おめでとうございます・・・

紙吹雪が舞うんですけどちんたらしていたらスクショできませんでした（悲）

秒でデプロイされました。ｽｺﾞ~~~~❗❗❗
ダッシュボードへ戻ると、各ドメインなどの確認ができます🎉

そして、今後リポジトリに何か変更があると、自動的にデプロイしてくれます🎉
では、さっそく試しに適当にテキスト変更などをしてみます。

- <HelloWorld msg="Vite + Vue" />
+ <HelloWorld msg="トムヤムクンヌードル" />
git add src/App.vue
git commit -m "Change text"
git push -u origin main

mainブランチの変更を検知して自動でビルドコマンドが走り、無事に反映されました🫨

カップ麺のできあがり

Vercelを使えば、爆速かつ簡単にプロジェクトをデプロイすることができます。今回、説明は割愛しましたが、本番・開発などのブランチごとにデプロイするURLを分けることができたり、特定のブランチの更新のみをデプロイすることができたりもします🥴 なによりGitリポジトリさえあれば、サーバーへデプロイできるというのが手軽さがあってよいですね😉

そろそろカップ麺も出来上がった頃合いではないでしょうか。それではここらへんで🍜

WEBサイト制作のお問い合わせ、お見積り依頼、ご質問は
こちらのお問い合わせフォームよりお願いいたします

メールお問い合わせはこちら