### Windowsにおける開発環境の構築手順(yarnを使用)
#### 前提条件
- Windowsがインストールされている
- インターネットに接続されている
#### 手順
1. **Node.jsのインストール**
- Node.js公式サイト(https://nodejs.org/)から最新版のNode.jsをダウンロードし、インストールします。
- インストール後、コマンドプロンプトを開き、以下のコマンドでインストールが成功したことを確認します。
```sh
node -v
npm -v
```
2. **Yarnのインストール**
- コマンドプロンプトを開き、以下のコマンドを実行してYarnをインストールします。
```sh
npm install -g yarn
```
- インストール後、以下のコマンドでインストールが成功したことを確認します。
```sh
yarn -v
```
3. **MySQLのインストール**
- MySQL公式サイト(https://dev.mysql.com/downloads/mysql/)からMySQL Community Serverをダウンロードし、インストールします。
- インストール中にrootユーザーのパスワードを設定します。これを忘れないようにメモしておいてください。
- インストール後、MySQL Workbenchなどのツールを使って接続確認を行います。
4. **Nginxのインストール**
- Nginx公式サイト(https://nginx.org/en/download.html)からWindows用のバイナリをダウンロードし、インストールします。
- ダウンロードしたファイルを解凍し、適当なディレクトリに配置します。
- コマンドプロンプトを開き、nginx.exeがあるディレクトリに移動して以下のコマンドを実行します。
```sh
start nginx
```
- Nginxのデフォルトの設定ファイルは`conf/nginx.conf`にあります。
5. **Visual Studio Codeのインストール**
- Visual Studio Code公式サイト(https://code.visualstudio.com/)からインストーラをダウンロードし、インストールします。
6. **必要な拡張機能のインストール**
- Visual Studio Codeを開き、以下の拡張機能をインストールします。
- Vetur(Vue.jsサポート)
- ESLint
- Prettier - Code formatter
- MySQL(SQLクエリのサポート)
- Nginx Configuration
7. **プロジェクトのセットアップ**
- コマンドプロンプトを開き、プロジェクト用のディレクトリを作成し、移動します。
```sh
mkdir my_project
cd my_project
```
- Yarnを使用してNode.jsプロジェクトを初期化します。
```sh
yarn init -y
```
- 必要なパッケージをインストールします。
```sh
yarn add express mysql2 vue
```
8. **プロジェクトの構成**
- プロジェクトのディレクトリ構成を以下のように設定します。
```
my_project/
├── backend/
│ ├── server.js
│ ├── routes/
│ └── models/
├── frontend/
│ ├── src/
│ ├── public/
│ └── package.json
└── nginx/
└── nginx.conf
```
9. **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;
}
}
```
10. **バックエンド(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}/`);
});
```
11. **フロントエンド(Vue.js)アプリの設定**
- `frontend`ディレクトリに移動し、Vue CLIを使ってプロジェクトを初期化します。
```sh
yarn global add @vue/cli
vue create .
```
- 必要なVueファイルを設定し、ビルドします。
```sh
yarn build
```
これで、Yarnを使用したWindowsでの開発環境が整いました。ローカル環境で開発を進めることができます。