説明

Astroで作った個人ブログです。
自分の簡単な紹介、これまでのプロジェクト、時間のあるときに書いた記事を読めます。
Blog・Project・PlaygroundにはAstroのContent Apiを使い、各投稿を.mdxファイルで書くことでコンポーネントを埋め込めるようにしています。

プロジェクトの画面

Previous slideNext slide

サイトリンク

• 個人ブログ
• Github

技術スタック

• Astro: SSGフレームワーク
• React: 主要コンポーネントの作成
• TailwindCSS: スタイリング
• Framer Motion: アニメーション
• Github Actions: 自動デプロイ
• Docker: コンテナイメージのビルド
• Nginx: Webサーバー
• Cloudflare: ドメイン管理

開発の過程

技術の選定

• Astro
  • state of js 2024で関心・注目・肯定的評価の3冠を獲得するほど、メタフレームワークとして注目されていた
  • そこでAstroを使った個人ブログを作りたくなり、このプロジェクトを始めた
  • Astroの詳しい評価はブログ記事を参照。
    Astroフレームワークの評価
• React
  • 今も多くの人から圧倒的に支持されるReactに、もっと慣れたかった
  • 最近とても人気のあるReactベースのCSS Library、Shadcn UIを使ってみたかった

UIの構成

• アニメーションや動きのある効果を付けたくて、MotionとTailwindCSSを組み合わせて実装した。

• 使いやすさのため、レスポンシブUIとDark/Lightモードを開発

PC画面	Mobile画面

Darkモード	Lightモード

ブログページの開発

• AstroのContent APIを活用

  • ブログ記事をMarkdownで書きたかったため、AstroのContent APIを使った

  1
  /**
  2
   * 파일 경로: ./src/content/config.ts
  3
   * 역할 설명: mdx의 frontmatter에 적혀있는 속성을 스키마로 가지는 콜렉션 지정
  4
   */
  5
  import { defineCollection, z } from 'astro:content';
  6
  
  7
  const blog = defineCollection({
  8
    type: 'content',
  9
    schema: z.object({
  10
      title: z.string(),
  11
      category: z.string(),
  12
      thumbnail: z.string().optional(),
  13
      created: z.coerce.date(),
  14
      tags: z.array(z.string()).optional(),
  15
      updated: z.coerce.date().optional(),
  16
    }),
  17
  });
  18
  
  19
  export const collections = { blog };

  1
  /**
  2
   * 파일 경로: ./pages/blog/[...slug].astro
  3
   * 역할 설명: post slug 경로와 일치하는 mdx를 렌더링하는 동적 페이지 생성
  4
   */
  5
  ---
  6
  import { type CollectionEntry, getCollection } from 'astro:content';
  7
  
  8
  export async function getStaticPaths() {
  9
    const posts = await getCollection('blog');
  10
    return posts.map((post, index) => ({
  11
      params: { slug: post.slug },
  12
      props: {
  13
        post,
  14
        prev: posts[index - 1] || null,
  15
        next: posts[index + 1] || null,
  16
      },
  17
    }));
  18
  }
  19
  
  20
  const { post, prev, next } = Astro.props;
  21
  const { Content } = await post.render();
  22
  ---
  23
  
  24
  <MdLayout post={post.data} nav={{ prev, next }} url={`/blog/${post.slug}`}>
  25
    <Content />
  26
  </MdLayout>

• 画面構成

  ブログ一覧画面	ブログ記事画面

• 投稿検索用のfuzz searchを実装

  • fuse.jsを使い、ユーザーが検索しやすいようにした
  

• アセットローダーとコード表示のためのMDX処理

  • Expressive code、Mermaid、Katexを追加
  • 詳しくはブログ記事を参照。https://www.jun-devlog.win/blog/web/common/markdown-test-mdx

  Expressive code	Mermaid	Katex

  • 画像の遅延読み込みに対応したImageLoaderを開発

    1
    // 이미지 로더
    2
    ---
    3
    import { getBasePathWithUrl } from '@/utils/getBasePathWithUrl.ts';
    4
    import React from 'react';
    5
    
    6
    type Props = {
    7
      src?: string;
    8
      alt?: string;
    9
      class?: string;
    10
      width?: number;
    11
      height?: number;
    12
    };
    13
    
    14
    const { src, alt = 'blog-image', class: className, width, height } = Astro.props;
    15
    ---
    16
    
    17
    <img
    18
      src={getBasePathWithUrl(src)}
    19
      alt={alt ?? 'blog-image'}
    20
      loading="lazy"
    21
      onerror={`this.src='/fallbackImg.svg'`}
    22
      class={className}
    23
      width={width}
    24
      height={height}
    25
    />

    1
    // mdx 파일
    2
    ---
    3
    title: Astro에 대해서
    4
    created: 2025-02-26
    5
    updated: 2025-02-27
    6
    tags: ['blog', 'astro', 'meta-framework']
    7
    category: Web
    8
    thumbnail: /files/blog/web/astro/assets/CleanShot_2025-02-26_20.22.28@2x.webp
    9
    ---
    10
    
    11
    import ImageLoader from '@/components/Blog/ImageLoader.astro';
    12
    import VideoLoader from '@/components/Blog/VideoLoader.astro';
    13
    
    14
    <ImageLoader src="/files/blog/web/astro/assets/[email protected]" alt="CleanShot_2025-02-26_20.22.28@2x" />
    15
    
    16
    ## 시작으로
    17
    
    18
    앞서 작성한 블로그 소개 글에서 언급했듯, 개발 블로그를 만들기 위하여 Astro를 사용해본 경험, 사용법에 대하여 기술하겠습니다.
    19
    ...

• 投稿データを前処理するjsファイルを追加

  • Markdownエディターで記事を書いてからブログサイトに追加するため、前処理が必要
  • 画像パスや他のコンポーネントを追加する前処理プラグインを作り、コンテンツ追加前に実行する
    • addMdEnter.js
    • convertLoader.js
    • removeUnusedImages.js
  

Docker・NginxによるWebサーバーと自動デプロイ環境の構築

問題の把握と解決策の検討

• 開発初期はnetlifyにデプロイしてサイトを作成
  • 問題: 写真が増えるにつれ、GitHubで容量超過の警告が出始めた
  • 解決策: Amazon S3か個人のファイルサーバーを用意し、ブログのアセットを保存する
• 個人のLinuxサーバーにファイルサーバーを構築することにしたが、 構成を変えるついでに、WebサーバーもLinuxサーバーへ移すことにした

---

Webサーバーと自動デプロイ環境の構成

• Github Action runnerのインストール

  • GitHubのガイドに従い、Linuxサーバーにself-hosted runnerをインストール
  

• nginx・docker file・workflowの設定

  • リモートブランチへのpush時にrunnerがビルド・デプロイするようworkflowを設定
  • デプロイ時にdocker fileでイメージをビルドし、指定設定でNginxコンテナを作成・実行
  • Cloud flareでドメインを設定し、ネームサーバー経由でアクセス可能にした

  1
  name: Astro Blog
  2
  
  3
  on:
  4
    push:
  5
      branches:
  6
        - master # 배포를 트리거하는 브랜치
  7
  
  8
  jobs:
  9
    build:
  10
      runs-on: self-hosted
  11
      steps:
  12
        - name: Checkout
  13
          uses: actions/checkout@v4
  14
  
  15
        - uses: pnpm/action-setup@v4
  16
          name: Install pnpm
  17
          with:
  18
            version: 10
  19
            run_install: false
  20
  
  21
        - name: Install Node.js
  22
          uses: actions/setup-node@v4
  23
          with:
  24
            node-version: 22
  25
            cache: 'pnpm'
  26
  
  27
        - name: Install dependencies
  28
          run: pnpm install
  29
  
  30
        - name: Build
  31
          run: pnpm build
  32
    deploy:
  33
      runs-on: self-hosted
  34
      needs: build
  35
      steps:
  36
        - name: Build Docker Image
  37
          run: DOCKER_BUILDKIT=1 docker build -t astro-blog .
  38
  
  39
        - name: docker stop & remove pre
  40
          run: docker stop astro-blog && docker rm astro-blog
  41
  
  42
        - name: docker run
  43
          run: docker run -d -v astro-blog-volume:/home/files --name astro-blog -p 4321:80  astro-blog

  1
  FROM ubuntu/nginx:1.18-22.04_beta
  2
  
  3
  ENV TZ="Asia/Seoul"
  4
  
  5
  COPY ./nginx.conf /etc/nginx/nginx.conf
  6
  COPY ./dist /var/www/html

  1
  worker_processes  1;
  2
  
  3
  events {
  4
    worker_connections  1024;
  5
  }
  6
  
  7
  http {
  8
    server {
  9
      listen 80;
  10
      server_name   _;
  11
  
  12
      root   /var/www/html;
  13
      index  index.html index.htm;
  14
      include /etc/nginx/mime.types;
  15
  
  16
      gzip on;
  17
      gzip_min_length 1000;
  18
      gzip_proxied expired no-cache no-store private auth;
  19
      gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  20
  
  21
      error_page 404 /404.html;
  22
      location = /404.html {
  23
              root /var/www/html;
  24
              internal;
  25
      }
  26
  
  27
      location / { #
  28
              try_files $uri $uri/index.html =404;
  29
      }
  30
      location /files { # 파일 서버
  31
          alias /home/files;
  32
      }
  33
    }
  34
  }

• docker volumeに画像を保存し、nginxで構成したファイルサーバーから読み込めるように設定