Takapom

このブログについて

概要

このブログは、髙木優希のアウトプット用のブログです。
寝る前の1時間を使って毎日書いているので日本語がおかしな点も多々あります笑
日頃の学習成果を記録として残してみたく、このブログを作成しました。
またフルスタック開発をしてみたく、フロントエンドとバックエンドを両方とも自分で作ってみたかったので、このブログを作成しました。
※ちなみに「このブログについて」のページはNext.jsに直書きしています。
(スキーマ定義忘れたため笑)

使用技術

  • フロントエンド: Next.js, React, TypeScript
  • バックエンド: Python, Django, Rest Framework
  • データベース: MySQL

ディレクトリ構造

ディレクトリ構造は以下のようになっています。
Next.jsのサーバーサイド、クライアントとして基本的な構造です。
DjangoはバックエンドをAPI化にするためにシリアライザー定義を行いました。

blog/
├── blog-backend/
│   ├── blog_backend/
│   │   ├── __init__.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   ├── posts/
│   │   ├── __init__.py
│   │   ├── admin.py
│   │   ├── apps.py
│   │   ├── models.py
│   │   ├── serializers.py
│   │   ├── urls.py
│   │   └── views.py
│   ├── db.sqlite3
│   ├── Dockerfile
│   ├── manage.py
│   └── requirements.txt
├── blog-frontend/
│   ├── src/
│   │   ├── app/
│   │   │   ├── components/
│   │   │   │   └── Header.tsx
│   │   │   ├── technology/
│   │   │   │   └── page.tsx
│   │   │   └── page.tsx
│   │   └── styles/
│   │       └── technology.module.css
│   ├── public/
│   ├── .next/
│   ├── Dockerfile
│   ├── next.config.ts
│   ├── package.json
│   ├── tsconfig.json
│   └── eslint.config.mjs
├── docker-compose.yml
├── package.json
└── README.md

デプロイ

デプロイはDockerを使用し、AWSのEC2によるものです。
AWSは初めての操作なので、理解にかなり苦労しました。
EC2のインスタンスを作成し、Dockerをインストールしました。