Zenn
🙌

Viteでフロントエンド開発環境を作成+Vercelにデプロイ

2024/03/10に公開
Git
Vercel
Winget
Vite
Windows 11
tech

1.今回やりたいこと(前書き)

今回はこちらを行っていきたいと思っています
➀Viteというビルドツールをを使用し、フロントエンド開発環境を準備
➁Viteで作成した環境をVercelというWebホスティングサービスにデプロイ(サイトを公開)

2.使用する環境

・Windows11 Home
・winget v1.7.10582

※Wingetは、Windowsのパッケージマネージャーで、Windows11であれば特に準備することなく、コマンドプロンプトやPower Shellから使用可能です。コマンドでGoogle Chromeなどのパッケージをインストールしたり、削除したりできるようです

Wingetのコマンド例
// wingetのバージョン確認
winget -v

// インストール
// -eは、ID に完全に一致するパッケージのみをインストール
// --id <パッケージID>は、インストールしたいパッケージの識別子を指定
winget install -e --id Google.Chrome

// 削除
winget uninstall --id <パッケージID>

// アップデート
winget upgrade --id <パッケージID>

3.インストールする環境

・Node.js　v21.7.0
・Vite v5.2.1
・Visual Studio Code
・Git 2.44.0.windows.1

4.Node.jsのインストール

wingetを使ってNode.jsのインストールを行います

node.jsのインストール
winget install -e --id OpenJS.NodeJS

コマンド実行後は、コマンドプロンプトなどを一度再起動し、インストールできていることを確認します。

node.jsのインストール確認
>node -v
v21.7.0

5.Viteのインストール

先ほどインストールしたnode.jsを使用してViteをインストールしていきます。-gオプションは、パッケージをグローバルにインストールするコマンドです。対象のパッケージはシステム全体で利用可能になります。-gを外すとコマンドを使用したディレクトリのみでパッケージを使用することができるようになるようです。

Viteのインストール方法
// インストール
npm install -g create-vite

// バージョン確認
npm list -g create-vite

6.Vite開発環境を作成

どこでもいいですがわかりやすく開発用のフォルダーを作成しておきます(任意のディレクトリでOKです)

開発環境構築
// ディレクトリ作成
mkdir develop
cd develop
npm create vite@latest [プロジェクト名]

// プロジェクト作成
npm create vite@latest Test
√ Package name: ... test
? Select a framework: » - Use arrow-keys. Return to submit.
>   Vanilla → いったんバニラJSを選択(なんでもOK)
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

>   TypeScript
    JavaScript → 今回はJSを選択

開発環境が作成できたら、ローカルサーバーを立ち上げます

プロジェクト立ち上げ
cd Test
npm install　: package.jsonに記載のある依存関係インストール
npm run dev  : ローカルサーバー(開発サーバー)を立ち上げ

VITE v5.1.5  ready in 790 ms
➜  Local:   http://localhost:5173/ ← ブラウザで開くと立ち上がる
➜  Network: use --host to expose
➜  press h + enter to show help

以下のような画面が表示されていればOKです！

7.寄り道してコード確認

VScodeを使用してコードの中身を確認してみます
Visual Studio Codeが入っていない場合は以下のコマンドでインストールします。

VScodeインストール
winget install Microsoft.VisualStudioCode

インストールできたら以下のコマンドを使用して、用意した開発環境を開きます

VScodeを開く
code .

フォルダーは以下の構成になっているようです

├─node_modules　: npmパッケージがインストールされる
├─public        : 静的なリソース（画像、フォント、その他の静的ファイル）
├─.gitignore    : Gitの追跡から除外するファイルやフォルダーを指定
├─counter.js    : JSのサンプル
├─index.html　　: WebアプリケーションのエントリーポイントとなるHTMLファイル
├─javascript.svg 
├─main.js       : アプリケーションのメインエントリーポイントとなるファイル
├─package-lock.json
├─package.json
└─style.css

8.Githubにコードをコミット

開発環境が完成したので、GithubにコードをPushし、Vercelでコードを公開しようと思います。そのためにまずはGithubでリポジトリを作成します

リポジトリが作成できたらGitを使用し、コードをPushします。
PCを新調し、Gitが入っていなかったのでGitをインストールするところから始めます
(すでにやっている人は飛ばしてください！)

Gitインストール
winget install -e --id Git.Git

忘れがちなGitの初期設定を行います

Gitの設定
// 名前とメールアドレス設定
git config --global user.name ${name}
git config --global user.email ${email}

// 設定確認(設定した名前が表示されればOK)
git config --global user.name
git config --global user.email

コードをPushしていきます

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/${name}/vite-test.git
git push -u origin main

GithubにコードがPushできたら以下のようにコードが表示されます

9.Vercelにデプロイ

Vercelにコードをデプロイしていきますが、まずはVercelとは何かを見ていきます。

Vercelとは、シンプル、かつ高速でWEBアプリを公開することができる、デジタルプラットフォームです。本来複雑なデプロイを数クリックで行うことができます！今回のような静的なサイトもホスティングすることが可能ですが、サーバーレス関数やWebアプリも無料で簡単にホストできるので、趣味プロダクトのサーバー代わりに使われているのをよく見かけます。

アカウントを持っていない方は無料で作れるので作ってみてください
(既にアカウントを持っているのでアカウント作成手順は省略します)

https://vercel.com/

ここからは実際にデプロイを行っていきます
[Add New] > [Project]を選択し、次のページでGithubを選択します。


Githubを選択すると、[Adjust GitHub App Permissions]という文字が表示されるのでクリックします


Githubの設定ページが表示され、リポジトリにアクセスを許可する画面が表示されるので、先ほど作成したvite-testを選択します


あとは、Vercelの画面に戻り、vite-testをインポートし、Deployを押すだけです


20秒程度でデプロイされました！速い！実際にデプロイしたサイトです！
https://vite-test-green-ten.vercel.app/

10.自動デプロイ

開発環境で、main.jsの<h1>タグをいじって、保存するとホットリロードされることがわかります。便利！

main.js
document.querySelector('#app').innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="${viteLogo}" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>TEST!!</h1> ← ここを変えてみる
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
  </div>
`


上記の変更をプッシュしてみます

git add .
git commit -m "CI/CD TEST"
git push

少し待つとVercelも自動で更新されているのがわかります！
CI/CD便利便利ですね～！

おまけ

ちょっと良いミニPCを新しく買ったので、久しぶりに個人開発をしようと思い、この記事を書き始めました。今回は環境構築、デプロイまでを行いましたが、いずれはThree.jsを使って、3D表現を組み込んだサイトが公開できればいいなと思っています！サイトが完成し、気が向いたら進捗を残していきます～(気が向いたらね！！)

日清食品さんの3Dサイト(ここまで出来たらいいなぁ。。。)
https://www.nissin.com/jp/

ちなみに購入したミニPCはこちら(テンション上がってるので自慢)
・商品名 : Minisforum UM790 Pro
・CPU　 : AMD Ryzen™ 9 7940HS
・GPU 　: AMD Radeon™ 780M
・メモリ : 32GB
・SSD 　: 1TB

https://amzn.to/3VhgpUd

Discussion