Open7
Nitro Server 設定、React Vue Svelte など
knaka Tech-BlogNitro Cloudflare デプロイ
概要
- Nitro メモになります。
[ 公開 2025/03/01 ]
構成
- Nitro
- Cloudflare
- node 20
参考
手順
- nitro install 後
npm i wrangler
npx wrangler login
- build
NITRO_PRESET=cloudflare_module npm run build
- wrangler.toml , 参考
name = "nitro-app-2"
compatibility_date = "2024-09-19"
main = "./.output/server/index.mjs"
assets = { directory = "./.output/public/", binding = "ASSETS" }
[vars]
NITRO_HELLO_THERE="general"
SECRET="secret"
- deploy , 以外と簡単でした。
npx wrangler deploy
public フォルダから。jsファイル読み込む例
- 初期設定 で、publicフォルダからファイル読めないようでした。
- npx giget@latest nitro nitro-app --install の場合。
- フォルダ構成の変更 の例。
- public , routesのフォルダ作成
- 又は、server/routes を。./routes に移動
- server フォルダ削除
├─public
└─routes
- nitro.config.ts
- compatibilityDate 以外、一旦削除します。
export default defineNitroConfig({
compatibilityDate: "2025-03-06"
});
- routes/index.ts の、例
export default defineEventHandler((event) => {
return "Start by editing <code>server/routes/index.ts</code>.";
});
- 再起動
npm run dev
- テスト
- public/test.txt 作成、適当な文字書く。
- http://localhost:3000/test.txt で、読めるようになりました。
knaka Tech-BlogReact + Nitro構成
- Nitro React スタック、作成内容になります。
- front コンパイル: vite build
構成
- Nitro
- React SPA
- node 20
- vercel
書いたコード
- start , http ://localhost:3000 画面起動です。
npx vite build
npm run dev
#OR
npx vite build && npm run dev
- 編集時( 別window )
npx nodemon
- tree : フォルダ参考
- routes: 画面tsx
- routes/api : API
- src: front file
├── nitro.config.ts
├── nodemon.json
├── package.json
├── public
│ ├── static
│ │ └── entry-client.js
│ ├── test.js
│ └── test.txt
├── routes
│ ├── [name].ts
│ ├── api
│ │ ├── test.ts
│ │ ├── test2.ts
│ │ └── test3.ts
│ ├── hello.get.ts
│ └── index.ts
├── src
│ ├── App.tsx
│ └── entry-client.tsx
├── tsconfig.app.json
├── tsconfig.json
└── vite.config.ts
Vue + Nitro構成
- Nitro Vue スタック、作成内容になります。
- front コンパイル: vite build
構成
- Nitro
- node 20
書いたコード
- start , http ://localhost:3000 画面起動です。
npx vite build
npm run dev
#OR
npx vite build && npm run dev
- 編集時( 別window )
npx nodemon
- tree : フォルダ参考
- routes: 画面.ts
- routes/api : API
- src: front file
tree .
.
├── nitro.config.ts
├── nodemon.json
├── package.json
├── public
│ └── test.txt
├── routes
│ ├── [name].ts
│ ├── api
│ │ ├── test.ts
│ │ ├── test2.ts
│ │ └── test3.ts
│ ├── hello.get.ts
│ └── index.ts
├── src
│ ├── App.vue
│ ├── client
│ │ ├── About.vue
│ │ └── Home.vue
│ ├── main.ts
│ └── router.ts
├── tsconfig.app.json
├── tsconfig.json
└── vite.config.ts
- package.json
{
"type": "module",
"private": true,
"scripts": {
"build": "nitro build",
"dev": "nitro dev",
"prepare": "nitro prepare",
"preview": "node .output/server/index.mjs"
},
"dependencies": {
"vue": "^3.4.21",
"vue-router": "^4.3.0",
"zod": "^3.24.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
"nitropack": "latest",
"nodemon": "^3.1.9",
"vite": "^6.2.0",
"vite-tsconfig-paths": "^5.1.4",
"vue-tsc": "^2.1.10"
}
}
Vue + Nitro + drizzle, ユーザー追加 認証
- Nitro Vue + drizzle 内容になります。
構成
- Nitro
- Vue
- node 20
- drizzle
書いたコード
- drizzle設定、参考
- https://orm.drizzle.team/docs/get-started/sqlite-new
- .env
DB_FILE_NAME=file:local.db
- ユーザー追加
- vue_auth_drizzle/routes/api/users/create.ts
- db.insert で追加。
- signup.vue 追加画面
- vue_auth_drizzle/src/client/signup.vue
- tree
$ tree .
.
├── drizzle.config.ts
├── local.db
├── nitro.config.ts
├── nodemon.json
├── package.json
├── public
├── routes
│ ├── [name].ts
│ ├── api
│ │ ├── test.ts
│ │ ├── test2.ts
│ │ ├── test3.ts
│ │ └── users
│ │ ├── create.ts
│ │ └── login.ts
│ ├── hello.get.ts
│ └── index.ts
├── src
│ ├── App.vue
│ ├── client
│ │ ├── About.vue
│ │ ├── Home.vue
│ │ ├── Login.vue
│ │ └── signup.vue
│ ├── components
│ │ └── Home
│ │ └── HomeContent.vue
│ ├── db
│ │ └── schema.ts
│ ├── index.ts
│ ├── input.css
│ ├── lib
│ │ ├── LibConfig.ts
│ │ └── startProc.ts
│ ├── main.ts
│ └── router.ts
├── tsconfig.app.json
├── tsconfig.json
└── vite.config.ts
firebase Authentication (認証) Nitro Vue
- Nitro Vue + firebase Authentication 内容になります。
構成
- firebase Authentication
- Nitro
- Vue
- node 20
関連
書いたコード
手順
- firebase Authentication画面から、firebaseの ApiKey等 取得する。
- nitro.config.ts
- runtimeConfig の追加に、firebaseの ApiKey等 設定
export default defineNitroConfig({
compatibilityDate: "2025-01-30",
runtimeConfig: {
firebaseApiKey: "",
firebaseAuthDomain: "",
firebaseProjectId: "",
firebaseStorageBucket: "",
firebaseMessageSenderId: "",
firebaseAppId: ""
}
});
- vue_auth_firebase/routes/api/users/login.ts
- vue_auth_firebase/routes/api/users/create.ts
https://github.com/kuc-arc-f/nitro_6ex/blob/main/vue_auth_firebase/routes/api/users/create.ts
画面vue
- vue_auth_firebase/src/client/Login.vue
- vue_auth_firebase/src/client/signup.vue
- tree
$ tree .
├── nitro.config.ts
├── nodemon.json
├── package.json
├── public
├── routes
│ ├── [name].ts
│ ├── api
│ │ ├── test.ts
│ │ ├── test2.ts
│ │ ├── test3.ts
│ │ └── users
│ │ ├── create.ts
│ │ └── login.ts
│ ├── hello.get.ts
│ └── index.ts
├── src
│ ├── App.vue
│ ├── client
│ │ ├── About.vue
│ │ ├── Home.vue
│ │ ├── Login.vue
│ │ └── signup.vue
│ ├── components
│ │ └── Home
│ │ └── HomeContent.vue
│ ├── input.css
│ ├── lib
│ │ ├── LibConfig.ts
│ │ ├── firebase.ts
│ │ └── startProc.ts
│ ├── main.ts
│ └── router.ts
├── tsconfig.app.json
├── tsconfig.json
└── vite.config.ts
作業めも、異なるフロントJS 画面単位で、インポートする例、Nitro
- 異なるフロントJS( React , Svelte, Vue) を画面単位で取り込み使うメモ
- CSR部分のみ、取り込む例
- 目的が、React等環境に 過去作成のsvelte画面を組込み、アプリ機能を追加したい
- 公開の、OSSコード等を、同様に取り込み活用したい。
- 公開 開発ドメインを、削減したい。
構成
- Nitro
- React , Svelte
- node 20
手順の概要
手順の概要
- [1] nitroの、ほぼCSR 空を準備
- [2] 各 異なるフロントJS 、画面単位で ビルド(vite build)
- [3] ベース部プロジェクトに。画面 取り込む
例 svelte: public/page2.js を、ベース部のpublic/page2.js にコピーする。
ベース部 参考
- vanilla 参考( ほぼCSR=空 )
https://github.com/kuc-arc-f/nitro_5ex/tree/main/vanilla
画面、追加後のパスの予定
- /page1 : react
- /page2 : Svelte
Svelte ビルド：画面単位
- src/client/page2.svelte
<script lang="ts">
</script>
<main>
<div>
<h1 class="text-3xl font-bold">page2</h1>
<hr />
<span><a href="/">[ home ]</a>
</span>
</div>
</main>
<style>
</style>
- src/client/page2.ts
import { mount } from "svelte";
import App from './page2.svelte'
mount(App, { target: document.getElementById('app') });
console.log("#page2-start");
- svelte_mpa/vite.config.ts
- entry : ./src/client/page2.ts に、変更
build: {
lib: {
entry: ["./src/client/page2.ts"],
formats: ['es'],
fileName: '[name]',
},
- svelte-build
npx vite build
- js出力： public/static/page2.js に出力
ベース部 svelte 組込み
- public/static/page2.js を、ベース部フォルダ public/static/page2.js コピー
- SSR追加、routes/page2.ts
export default eventHandler(async (event) => {
return `<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>page2</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/static/page2.js"></script>
</body>
</html>
`;
});
- ベース部 サーバー起動
npm run dev
localhost/page2 を、開くと。 svelte画面表示
React 画面ビルド
- svelte と同様になります。
- src/client/page1.tsx
import ReactDOM from 'react-dom/client'
import React from 'react'
const Page: React.FC = () => {
return (
<div className="text-3xl"><h1>page1</h1>
<hr />
<span><a href="/">[ home ]</a>
</span>
</div>
);
};
ReactDOM.createRoot(document.getElementById('app')).render(
<div>
<Page />
</div>
);
- SSR追加、確認用
- routes/page1.ts
export default eventHandler(async (event) => {
return `<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Nitro Example</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/static/page1.js"></script>
</body>
</html>
`;
});
-
vite.config.ts
-
entry : ./src/client/page1.tsx に、変更
build: {
lib: {
entry: ["./src/client/page1.tsx"],
formats: ['es'],
fileName: '[name]',
},
- react-build
npx vite build
js出力： public/static/page1.js に出力
ベース部 react 組込み
- public/static/page1.js を、ベース部 public/static/page1.js コピー
- SSR追加、routes/page1.ts
export default eventHandler(async (event) => {
return `<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>page1</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/static/page1.js"></script>
</body>
</html>
`;
});
- ベース部 サーバー起動
npm run dev
localhost/page1 を、開くと。 react画面表示
ログインするとコメントできます