WindowsでのWeb開発環境構築手順
はじめに
以下の問題を抱えている方の助けになれば幸いです。
- フロントエンドとバックエンドを同時に開発したい。
- 無償で商用アプリを開発したい。
- Windows しか使えない。
- 高速でデバッグを開始したい。
- デバッグ開始時、フロントエンドのトップページや、バックエンドの「Swagger」ページが自動で開くようにしたい。
- デバッグ実行中にブレークポイントで停止したり、編集した内容をリアルタイムで反映させたい。
概要
- OS: Windows (WSL2 を使った Ubuntu 環境の構築は含みません)
- 開発ツール: Visual Studio Code (以降、VSCode)
- フロントエンド: React、Vite、TypeScript、MUI、https ポート 12345
- バックエンド: ASP.NET Core、C#、https ポート 12346
- デバッグ実行時は 2 つのサーバーが起動し、フロントエンド (12345) から API が呼ばれたらポート 12346 へリダイレクトするようなイメージで環境構築します。
本稿投稿時点での各バージョン
- Windows 10 Home 22H2
- Node.js 21.2.0
- .NET 8.0 SDK 8.0.204
- VSCode 1.89.0
- TypeScript 5.4.5
- React 18.2.0
- MUI 5.15.17
- Vite 5.2.11 (ヴィートって読むらしい)
アプリの名前
フォルダ名やパラメーター値等で使いますので、予め決めておいてください。
Node.js
-
Download Node.js から
v22.1.0 (Current)、Windows、x64を指定し、インストーラーをダウンロード。 - インストーラーを実行。
- インストール後、コマンド プロンプトを開きバージョンを確認。
> node --version
v22.1.0
> npm ---version
10.7.0
.NET 8 SDK
-
.NET 8.0 のダウンロード から
Windows、インストーラー、x64のインストーラーをダウンロード。 - インストーラーを実行。
VSCode
-
Download Visual Studio Code から
Windows 10, 11、User Installer、x64のインストーラーをダウンロード。 - インストーラーを実行。
- 以下を参照に日本語化。
Vite
- 作業フォルダを作成。
- コマンド プロンプトを開き以下の通り実行。
> cd /D D:\PerfectSample
> npm create vite
? Project name: PerfectSample.client
? Select a framework: React
? Select a variant: TypeScrip + SWC
Scaffolding project in D:\PerfectSample\PerfectSample.client…
Done. Now run:
cd PerfectSample
npm install
npm run dev
- 続けて、コマンド プロンプトで以下を実行。
> cd PerfectSample
> npm install
//パッケージのインストール処理が行われます。しばらくお待ちください。
> npm run dev
- すると、別ウインドウが表示され、以下が表示されているはずです。
Vite v5.2.11 ready in 999 ms
- Local: http://localhost:5173/
- Network: use --host to expose
- press h + enter to show help
- 上記の
Localに表示された URL を開き、「Vite + React」ページが表示されることを確認します。
「count is 0」ボタンをクリックすると数値が増加するギミックがあります。試してみてください。 - 4 のウインドウ上で
q + enterを押し、npm を終了します。
API サンプル
- スタート メニューから VSCode を起動します。
- 「メニュー → ファイル → フォルダを開く」から "D:\PerfectSample" を開きます。
このとき「このフォルダー内のファイルの作成者を信頼しますか?」というメッセージが出たら、「はい、作成者を信頼します」をクリックしてください。 - 「メニュー → 表示 → ターミナル」を開きます。
- カレント フォルダが "D:\PerfectSample" になっていることを確認した後、以下を実行し API テンプレートを作成します。
> dotnet new webapi --use-controllers -o PerfectSample.server
テンプレート "ASP.NET Core Web API" が正常に作成されました。
- 続けて以下を実行し、https の証明書を信頼します。
> cd PerfectSample.server
> dotnet dev-certs https --trust
Successfully trusted the existing HTTPS certificate.
- 続けて以下を実行し、アプリを起動します。
> dotnet run --launch-profile https
ビルドしています...
info: Microsoft.Hosting.Lifetime[14]
Now listening on: https://localhost:7026
～
- 上記に表示された URL +
/swagger(上記の例ならhttps://localhost:7026/swagger) を開き、「Swagger」ページが表示されることを確認します。
「WeatherForecast」というサンプル API が実行できる状態になっているので、「GET → Try it out → Execute」を実行し、レスポンスが返ってくることを試してみてください。 - VSCode のターミナル上で
Ctrl + Cを押し、アプリを終了します。
デバッグ実行できるようにする (フロントエンド)
- Vite で https にアクセスできるようにするためライブラリ @vitejs/plugin-basic-ssl をインストールします。
ターミナルから以下を実行します。
> cd ../PerfectSample.client
> npm install @vitejs/plugin-basic-ssl
//パッケージのインストール処理が行われます。しばらくお待ちください。
- ".\PerfectSample.client\vite.config.ts" を以下のように修正します。
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
+import basicSsl from '@vitejs/plugin-basic-ssl'
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [react()],
+ plugins: [
+ react(),
+ basicSsl()
+ ],
+ server: {
+ proxy: {
+ '/api': {
+ target: 'https://localhost:12346/',
+ secure: false,
+ changeOrigin: true
+ }
+ },
+ port: 12345
+ }
})
これで https 接続できるようになり、ついでにポート 12345 で起動するよう設定しています。
また、/api で始まる URL へアクセスしたときはポート 12346 に接続するよう設定しています。
- 同様に、".\PerfectSample.client\package.json" を以下のように修正します。
"scripts": {
- "dev": "vite",
+ "dev": "vite --port 12345",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
これでポート 12345 で起動するよう設定しています。
-
F1→「タスク:タスクの構成 → npm: dev - PerfectSample.client」を選択すると、新たに ".\.vscode\tasks.json" が生成されますので、それを以下のように修正します。
{
"type": "npm",
"script": "dev",
"path": "PerfectSample.client",
+ "isBackground": true,
- "problemMatcher": [],
+ "problemMatcher": [
+ {
+ "pattern": [
+ {
+ "regexp": "^$",
+ "file": 1,
+ "location": 2,
+ "message": 3
+ },
+ ],
+ "background": {
+ "activeOnStart": true,
+ "beginsPattern": "PerfectSample.client@*",
+ "endsPattern": "ready in*"
+ }
+ }
+ ],
"label": "npm: dev - PerfectSample.client",
"detail": "vite --port 12345"
}
isBackground は VSCode の操作を妨げないようバックグラウンドで実行させるための設定です。beginsPattern と endsPattern でタスクの開始と終了を判断しています。ターミナル上でこのキーワードを含むメッセージが出たときにそれぞれ反応するようですので、Vite 実行時のメッセージにあわせて設定しています。
pattern はよく分からん。書かないとエラーが出るので、とりあえず全許可 ("^$") で設定しています。
- 「メニュー → 実行 → 構成の追加」から「Web アプリ (Chrome)」を選択すると、新たに ".\.vscode\launch.json" が生成されますので、それを以下のように修正します。
"configurations": [
{
"type": "chrome",
"request": "launch",
- "name": "localhost に対して Chrome を起動する",
+ "name": "client",
+ "preLaunchTask": "npm: dev - PerfectSample.client",
+ "sourceMaps": true,
- "url": "http://localhost:8080",
+ "url": "https://localhost:12345",
- "webRoot": "${workspaceFolder}"
+ "webRoot": "${workspaceFolder}/PerfectSample.client"
}
]
"name" は変更不要ですが、長いので変えます。
-
Ctrl + ,→「設定 → ユーザー → 機能 → デバッグ → Allow Breakpoint Everywhere」にチェックを付けます。
ここにチェックを付けないと ts ファイルにブレークポイントを設定できない場合があるためです。
何らかのタイミングで初期値 (未チェック) に戻る場合があるらしいのでご注意ください。 -
おそらくデバッグ実行時に「自己署名証明書は信頼できない」とエラーが出るので、先に無効化します。
コマンド プロンプトから以下を実行します。
> npm config set strict-ssl false
-
左メニュー「実行とデバッグ」を開き、対象に "client" と指定されていることを確認した後、
F5でデバッグ実行を開始します。
初回実行時は「この接続ではプライバシーが保護されません」のような警告画面が表示されますが、無視して開いてください。
https 接続として「Vite + React」の画面が開けば成功です。 -
".\PerfectSample.client\src\App.tsx" のうち、
function App()内のどこか (何も編集していなければ 7 行目const [count, setCount] = useState(0)) にブレークポイントを設定します。 -
「Vite + React」画面内の「count is 0」ボタンをクリックしたとき、8. で設定したブレークポイントで停止することを確認します。
デバッグ実行できるようにする (バックエンド)
- 左メニュー「拡張機能」から "C#" を検索し、C# をインストール。
- ".\PerfectSample.server\Propaties\launchSetting.json" を以下のように修正します。
"https": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"launchUrl": "swagger",
- "applicationUrl": "https://localhost:7037;http://localhost:5154",
+ "applicationUrl": "https://localhost:12346;http://localhost:5154",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
これでポート 12346 で起動するよう設定しています。
- ".\PerfectSample.server\Controllers\WeatherForecastController.cs" を以下のように修正します。
[ApiController]
-[Route("[controller]")]
+[Route("api/[controller]")]
public class WeatherForecastController : ControllerBase
{
～
これでこの API に接続するときの URL を api/WeatherForecast となるように変更しています。
もし他の API を作成するときも同様の属性を付与する必要があるので注意。
- ".\.vscode\tasks.json" に以下を追加します。
{
"type": "process",
"command": "dotnet",
"args": [
"build",
"${workspaceFolder}/PerfectSample.server/PerfectSample.server.csproj",
"/property:GenerateFullPaths=true",
"/consoleloggerparameters:NoSummary"
],
"problemMatcher": "$msCompile",
"label": "dotnet: build"
}
バックエンドをビルドするためのタスクになります。
- 「メニュー → 実行 → 構成の追加 → .NET: 実行可能ファイルの起動 (Web)」を選択すると ".\.vscode\launch.json" にコードが追加されますので、以下のように修正します。
{
- "name": ".NET Core Launch (web)",
- "name": "server",
"type": "coreclr",
"request": "launch",
- "preLaunchTask": "build",
+ "preLaunchTask": "dotnet: build",
- "program": "${workspaceFolder}/bin/Debug/<target-framework>/<project-name.dll>",
+ "program": "${workspaceFolder}/PerfectSample.server/bin/Debug/net8.0/PerfectSample.server.dll",
"args": [],
- "cwd": "${workspaceFolder}",
+ "cwd": "${workspaceFolder}/PerfectSample.server",
"stopAtEntry": false,
"serverReadyAction": {
"action": "openExternally",
+ "uriFormat": "%s/swagger/index.html",
"pattern": "\\bNow listening on:\\s+(https?://\\S+)"
},
"env": {
+ "ASPNETCORE_URLS": "https://localhost:12346;http://localhost:5034",
"ASPNETCORE_ENVIRONMENT": "Development"
},
"sourceFileMap": {
- "/Views": "${workspaceFolder}/Views"
+ "/Views": "${workspaceFolder}/PerfectSample.client/src"
}
}
"name" は変更不要ですが、長いので変えます。
"uriFormat" の設定でデバッグ開始直後に「Swagger」ページが開くようになります。
"/Views" にはフロントエンド側でデバッグしたいファイルが格納されているフォルダを設定しています。
-
左メニュー「実行とデバッグ」を開き、対象に "server" が選択できることを確認した後、"server" を選択して
F5でデバッグ実行を開始します。
ブラウザが起動し「Swagger」の画面が開けば成功です。 -
".\PerfectSample.server\Controllers\WeatherForecastController.cs" のうち、
Get()内のどこか (何も編集していなければ 24 行目return Enumerable.～) にブレークポイントを設定します。 -
「Swagger」画面内の「WeatherForecast → GET → Try it out → Execute」をクリックしたとき、7. で設定したブレークポイントで停止することを確認します。
-
Shift + F5でデバッグ実行を停止します。
デバッグ実行できるようにする (両方同時に)
- ".\.vscode\launch.json" を以下のように修正します。
"configurations": [
～
+ ],
+ "compounds": [
+ {
+ "name": "server & client",
+ "configurations": [
+ "server",
+ "client"
+ ]
+ }
]
-
左メニュー「実行とデバッグ」を開き、対象に "server & client" が選択できることを確認した後、"server & client" を選択して
F5でデバッグ実行を開始します。
フロントエンド側の「Vite + React」と、バックエンド側の「Swagger」が続けて開けば成功です。 -
フロントエンド側のブラウザで URL に直接
https://localhost:12345/api/WeatherForecastを入力したとき、API の結果が画面上に表示されることを確認します。
これが成功すれば、ポート 12345 から API を呼び出した時、ポート 12346 にリダイレクトしているということになります。 -
最後に、フロントエンド側、バックエンド側それぞれのファイルにブレークポイントを付け、それぞれで停止することを確認します。
-
Shift + F5でデバッグ実行を停止します。
2 つ実行されている状況なので、2 回キーを押してください。
デプロイ用のファイルを生成する
- フロントエンドはターミナルから以下を実行すると "./PerfectSample.client\dist" フォルダにデプロイ用のファイルが生成される。
> cd PerfectSample.client
> npm run build
- バックエンドはターミナルから以下を実行すると "./PerfectSample.server\bin\Release\net8.0\publish" フォルダにデプロイ用のファイルが生成される。
> cd PerfectSample.server
> dotnet publish -c Release
課題
- バージョン管理
- Git を使うのが一般的だが、使い方がわからないので説明できない。
- バックエンドのデータベース接続
- EntitiyFramework 機能をインストールし、REST API のサンプルを実装するくらいは試したい。
- 今回の説明のとおり進めたとき、フロントエンド側で https が警告扱い
- バックエンド側では警告が出ないので、フロントエンド側でも警告は出したくない。
- Prettier、ESLint
- 必須だが、特に ESLint の初期推奨設定は要精査。
- なんか微妙にライブラリが最新バージョンじゃない
- Vite で自動的にインストールされたライブラリか？最新を使えるよう手順に組み込む。
- (メモ) FW Auth
- (メモ) FW Schema SQL
- (メモ) FW DI
- (メモ) FW UInput React-Hook-Form
- (メモ) AMB Path vite.path.config
- (メモ) テンプレ化して blank プロジェクトとして保管
以上です。
P.S.
環境構築とかで時間を取られるのが本当に辛いですが、ここを理解しないと開発中に発生する意味不明な挙動に対処できないでしょう。
本当に時間を費やしたいのはアプリの中身。既存の資産で使えるところは使い、早く開発フェーズに移行したいものです。
Discussion