1.開発環境整備(GitHubとローカル環境を連携、VSCodeを用いて)

Posted at 2025-11-05

インフラと開発フローをより実務寄りに整える

1. コード管理・開発環境整備

GitHubでリポジトリ管理（ブランチ運用やPRフローも意識）
Dockerfileを作成してローカル開発環境をコンテナ化
Linter（ESLintなど）やフォーマッター（Prettierなど）を導入してコード品質担保

2. CI/CD構築

GitHub Actionsでプッシュ → ビルド → テスト → デプロイ自動化
AWS CodeDeploy / ECS / Lambdaなどに自動デプロイ
デプロイ前にDockerイメージビルド＆テストを追加

3. IaC・環境管理

TerraformでVPC/EC2/RDS/S3/ALBなどのリソース管理
CloudFormationとの比較を学び、どちらも書ける状態に
環境ごと（dev/stg/prod）の変数管理

4. モニタリング・運用強化

既存Zabbix構成をDocker化して他環境でも再現可能に
CloudWatchメトリクスやアラームも追加して監視レイヤーを強化

5. ポートフォリオとしての見せ方

QiitaやGitHubで「コード＋構成図＋スクショ＋自動化フロー」をまとめる
Terraform + CI/CD + Docker + Node.jsアプリ + 監視まで一連で示す

1️⃣ GitHub管理・Lint/Prettier導入
2️⃣ Lambda + API Gateway + DynamoDB構築（CloudFormation → Terraform化）
3️⃣ GitHub ActionsでCI/CD自動デプロイ
4️⃣ 同アプリをDocker化
5️⃣ ECS(Fargate)で運用 + TerraformでIaC統合

(1) Lambda構成でCI/CDとIaC習得
↓
(2) 同アプリをDocker化
↓
(3) ECS(Fargate)へデプロイ + Terraform管理

1️⃣ GitHub管理・Lint/Prettier導入
・GitHub管理・Lint/Prettier導入の目的は、コード品質と管理体制を整えるための準備段階。

■Windows環境で「GitHub管理・Lint/Prettier導入」を行うためのローカル開発環境セットアップ＋具体操作手順

💻 ローカル環境とは

自分のPC内で開発・実行・テストを行う環境。
AWSやクラウドを使わず、Node.js（実行環境）とGit（バージョン管理）**を使ってコードを書く場所。

🧩 1. 必要ツールのインストール

① Node.js（JavaScript実行環境）

公式サイト → https://nodejs.org/ja
「推奨版（LTS）」を選びインストール。
インストール後、PowerShellまたはコマンドプロンプトで確認：
```
node -v
npm -v
```
バージョンが表示されればOK。

② Git（ソース管理ツール）

公式サイト → https://git-scm.com/
Windows版をダウンロード・インストール。
（設定はデフォルトでOK）
インストール後確認：
```
git --version
```

③ VS Code（開発エディタ）

公式サイト → https://code.visualstudio.com/
インストール後、「拡張機能」から以下を追加：
- ESLint
- Prettier - Code formatter
- GitHub Pull Requests

🧱 2. 作業ディレクトリの作成

任意の場所にフォルダを作成（例：C:\projects\lambda-api）
VS Codeを開く → メニュー「ファイル」→「フォルダーを開く」でこのフォルダを選択。

⚙️ 3. Node.jsプロジェクト初期化

VS Codeのターミナルを開いて以下を実行：

npm init -y

→ package.json が作成される（Node.jsプロジェクトの定義ファイル）

🧹 4. Lint/Prettier導入

以下を順に実行：

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

設定ファイル作成

eslint.config.js

import globals from "globals";
import pluginJs from "@eslint/js";
import prettierPlugin from "eslint-plugin-prettier";

export default [
 { languageOptions: { globals: globals.node } },
 pluginJs.configs.recommended,
 {
   plugins: { prettier: prettierPlugin },
   rules: {
     "prettier/prettier": "error",
     semi: ["error", "always"],
     quotes: ["error", "double"]
   },
 },
];

.prettierrc

{
"semi": true,
"singleQuote": false,
"tabWidth": 2
}

・追加インストール

　npm install --save-dev @eslint/js eslint-plugin-prettier globals

🧪 5. 動作確認

サンプルコードを作成（例：index.js）

const message = "Hello Lambda";
console.log(message);

コードチェック

npx eslint .

自動整形

npx prettier --write .

🔗 6. GitHubリポジトリとの連携

初期化

git init

GitHubで新規リポジトリ作成

（例：lambda-api）

リモート接続

git remote add origin https://github.com/<あなたのユーザー名>/lambda-api.git

コミット＆プッシュ

git add .
git commit -m "初回コミット"
git push -u origin main

これらの操作では、VS Code（内部のGit機能）がローカルのコードをGitHub上のリポジトリに同期しています。
それぞれ何をしているかを分解して説明します。

🔹 前提

自分のPCのフォルダ（例：C:\Users\...\Projects\lambda-api）＝ローカルリポジトリ
GitHub上の https://github.com/ユーザー名/lambda-api ＝リモートリポジトリ

①初期化

git init

②GitHubで新規リポジトリ作成

（例：lambda-api）

③リモート接続

git remote add origin https://github.com/<あなたのユーザー名>/lambda-api.git

目的：ローカルとGitHub（リモート）を接続する。

VS Code（またはGit）は、今後このURLを「origin」という名前で認識する。
つまり、「このフォルダの中身を、このGitHubリポジトリに同期する」と設定しているだけ。
この時点ではまだファイルは送られていない。

④あなたのGitHub情報を登録

git config --global user.name "好きな名前"
git config --global user.email "GitHub登録メールアドレス"

git config --list #設定確認コマンド（↑で登録した値の確認）

⑤ブランチ名を合わせる

git branch #現在のbranchを確認

git branch -M main　#GitHubのデフォルトのbranchがmainなので合わせる（branch名をmainに設定）

`git add .`

目的：ローカルで変更したファイルを「ステージング領域」に登録。

Gitは「変更をすぐに記録する」わけではなく、一時的に記録候補として登録します。
. は「すべての変更を追加」という意味。
VS Codeでは左側のソース管理アイコン（枝のマーク）を開くと、ステージされたファイルが一覧表示されます。

`git commit -m "初回コミット"`

目的：ステージした変更を、ローカルリポジトリに保存（スナップショットを作成）。

commit＝「この時点の状態を保存」
-m "..." はコミットメッセージ
ここで初めてローカル履歴として保存される。
VS Codeの下部に「1 commit」と表示されることもある。

`git push -u origin main`

目的：ローカルの変更をGitHubへアップロード。

origin は先ほど設定したGitHubのリポジトリ名
main はブランチ名（メイン開発線）
結果：GitHub上にローカルと同じフォルダ構成・コードが反映される。

📈 まとめ：流れのイメージ

ローカルで作成
   ↓
git add .          ← 変更を登録
   ↓
git commit -m ""   ← ローカルに履歴を保存
   ↓
git push origin main  ← GitHubにアップロード

成功したら、GitHub上の
👉 https://github.com/ユーザー名/lambda-api

を開くと、index.jsやeslint.config.mjsが見えるはず。

💡 VS Codeでの視覚的操作

左の「ソース管理」アイコンを開く（枝のマーク）
変更したファイルを確認
上のチェックマーク（✓）でコミット
「…」メニュー → 「Push」でGitHubに反映

今後はブランチ設定済みなので、更新時は以下でOK：

git add .
git commit -m "update"
git push

今回行ったこと

Node.jsプロジェクトがローカルで動作
Lint/Prettierでコード整形
GitHubにソースを安全に保管

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up