### Windowsにおける開発環境の構築手順
#### 前提条件
- Windowsがインストールされている
- インターネットに接続されている
#### 手順
1. **Node.jsのインストール**
- Node.js公式サイト（https://nodejs.org/）から最新版のNode.jsをダウンロードし、インストールします。
- インストール後、コマンドプロンプトを開き、以下のコマンドでインストールが成功したことを確認します。
```sh
node -v
npm -v
```
2. **MySQLのインストール**
- MySQL公式サイト（https://dev.mysql.com/downloads/mysql/）からMySQL Community Serverをダウンロードし、インストールします。
- インストール中にrootユーザーのパスワードを設定します。これを忘れないようにメモしておいてください。
- インストール後、MySQL Workbenchなどのツールを使って接続確認を行います。
3. **Nginxのインストール**
- Nginx公式サイト（https://nginx.org/en/download.html）からWindows用のバイナリをダウンロードします。
- ダウンロードしたファイルを解凍し、適当なディレクトリに配置します。
- コマンドプロンプトを開き、nginx.exeがあるディレクトリに移動して以下のコマンドを実行します。
```sh
start nginx
```
- Nginxのデフォルトの設定ファイルは`conf/nginx.conf`にあります。
4. **Visual Studio Codeのインストール**
- Visual Studio Code公式サイト（https://code.visualstudio.com/）からインストーラをダウンロードし、インストールします。
5. **必要な拡張機能のインストール**
- Visual Studio Codeを開き、以下の拡張機能をインストールします。
- Vetur（Vue.jsサポート）
- ESLint
- Prettier - Code formatter
- MySQL（SQLクエリのサポート）
- Nginx Configuration
6. **プロジェクトのセットアップ**
- コマンドプロンプトを開き、プロジェクト用のディレクトリを作成し、移動します。
```sh
mkdir my_project
cd my_project
```
- Node.jsプロジェクトを初期化します。
```sh
npm init -y
```
- 必要なパッケージをインストールします。
```sh
npm install express mysql2 vue
```
7. **プロジェクトの構成**
- プロジェクトのディレクトリ構成を以下のように設定します。
```
my_project/
├── backend/
│ ├── server.js
│ ├── routes/
│ └── models/
├── frontend/
│ ├── src/
│ ├── public/
│ └── package.json
└── nginx/
└── nginx.conf
```
8. **Nginxの設定**
- `nginx/nginx.conf`ファイルを以下のように編集します。
```nginx
server {
listen 80;
server_name localhost;
location / {
root /path/to/my_project/frontend/public;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://localhost:3000/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
```
- `/path/to/my_project/frontend/public`は実際のパスに置き換えてください。
9. **バックエンド（Node.js）サーバの設定**
- `backend/server.js`を以下のように編集します。
```js
const express = require('express');
const mysql = require('mysql2');
const app = express();
const port = 3000;
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'yourpassword',
database: 'yourdatabase'
});
db.connect(err => {
if (err) {
console.error('error connecting: ' + err.stack);
return;
}
console.log('connected as id ' + db.threadId);
});
app.get('/api/test', (req, res) => {
res.send('Hello World!');
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}/`);
});
```
10. **フロントエンド（Vue.js）アプリの設定**
- `frontend`ディレクトリに移動し、Vue CLIを使ってプロジェクトを初期化します。
```sh
npm install -g @vue/cli
vue create .
```
- 必要なVueファイルを設定し、ビルドします。
```sh
npm run build
```
以上で、Windowsでの開発環境が整いました。必要に応じて、各コンポーネントの設定やスクリプトの追加を行ってください。