目的
- お手軽にNuxt3の開発環境を構築したい
- ローカル環境を汚さずに、CodeSandboxというクラウドでのWebアプリケーション開発環境を利用して、手軽にNuxt3のサンプルを共有したい。
- CodeSandboxにはNuxt3用にテンプレートが利用できるが、環境構築がブラックボックス化されているため、NodeJS環境からの構築を確認したい。
CodeSandboxについて
- https://codesandbox.io/
- クラウド環境に、Vue、React、Angular等のWebアプリケーション開発環境を構築できる。
- チーム内でのサンプルコードの共有が容易
- ローカル環境に依存しない
- GitHubとの連携が可能
- ローカル環境への移行が容易
Nuxt3開発環境構築手順
Vanilla環境の構築
- NodeJS環境から理解するため、Vanillaテンプレートから環境を構築する。
-
CodeSandboxから「New sandbox」を押下
-
「Vanilla」を選択すると、以下の初期画面となる。
-
「Terminal」を選択する。terminalを利用するには、「Browser Sandbox」から「Cloud Sandbox」にupdateが必要(Freeのまま利用可能)とのことなので、「Yes, convert」を押下。
-
右上部の「+」をクリックし、「New Terminal」を選択すると、新規terminalが起動する。
5. terminalで、既定の開発環境を確認する。(2023/04/17現在)
➜ workspace git:(master) ✗ node --version
v16.17.0
➜ workspace git:(master) ✗ npm --version
8.15.0
➜ workspace git:(master) ✗ yarn --version
1.22.19
Nuxt3環境の構築
- 後は、Nuxt3のスタートアップをterminalで実行していくだけ。
-
nuxt3appというアプリケーションを作成する。
➜ workspace git:(master) ✗ npx nuxi init nuxt3app Need to install the following packages: nuxi@3.4.1 Ok to proceed? (y) y [4:35:36 AM] Nuxi 3.4.1 [4:35:37 AM] ✨ Nuxt project is created with v3 template. Next steps: [4:35:37 AM] › cd nuxt3app [4:35:37 AM] › Install dependencies with npm install or yarn install or pnpm install [4:35:37 AM] › Start development server with npm run dev or yarn dev or pnpm run dev npm notice npm notice New major version of npm available! 8.15.0 -> 9.6.4 npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.4 npm notice Run npm install -g npm@9.6.4 to update! npm notice -
アプリケーションフォルダに移動し、npm installを実行
➜ nuxt3app git:(master) ✗ npm install npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead > postinstall > nuxt prepare Nuxi 3.4.1 4:39:02 AM ✔ Types generated in .nuxt 4:39:03 AM added 621 packages, and audited 622 packages in 54s 104 packages are looking for funding run `npm fund` for details found 0 vulnerabilities -
devモードでアプリケーション起動
> npm run dev Nuxi 3.4.1 4:44:29 AM Nuxt 3.4.1 with Nitro 2.3.3 4:44:29 AM 4:44:30 AM > Local: http://localhost:3000/ > Network: http://192.168.241.2:3000/ ℹ Vite client warmed up in 1785ms 4:44:33 AM ✔ Nitro built in 857 ms nitro 4:44:33 AM -
localhost:3000（または上記Network)にブラウザからアクセス
* nuxt3の初期アプリケーション画面が表示される。
* 環境によってはブラウザからのアクセスは許可されず、「Unconfigured:3000」タブにアプリケーション画面が表示される。
