🧠

ぼくのAstro開発環境

2023/06/26に公開

はじめに

はじめまして、新米フロントエンドエンジニアのもりみちです。少し前に開発環境をEJS×WebpackからAstroに乗り換えたのですが、googleで「Astro 環境構築」と検索してもチュートリアルやってみました！、VSCode拡張機能インストール、Prettier、Tailwind CSSをインストールして終わり！的なことしか書いてないやんけ！(私の調べる力が雑魚なだけです...)って思い,とりあえず俺の開発環境を公開することによって芋蔓式にいろんな人の開発環境が知れたら面白いな〜って思いこの記事を作成することにしました。
それではHere I go

対象

Astroのチュートリアルが終わった人
人のAstro開発環境が知りたくてしょうがない人

この記事で触れないこと

Astroの概要(チュートリアル終わった人が対象なのでこちは省きますね)

本編

結論

まず完成図を皆んなで見ましょう。

ディレクトリ構成

astro-project
 ├─ dist
 │  　├─ about/
 │　　　　　│   └─ index.html
 │　　　　　├─ assets/　　
 │　　　　　│   ├─ images/
 │　　　　　│   ├─ js/
 │　　　　　│　　　　 └─ styles/
 │　　　　　└─ index.html
 │
 ├─ node_modules
 ├─ public
 │  ├─ assets/
 │  │ └─ images/
 │  └─favicon.svg
 ├─ src
 │  　├─ components/
 │　　　　　│　　　　├─ layouts/
 │　　　　　│　　　　├─ page/
 │　　　　　│　　　　└─ ui/
 │　　　　　│　　　　
 │　　　　　├─ js/
 │  　├─ pages/
 │  　└─ styles/
 ├─ .gitignore
 ├─ astro.config.mjs
 ├─ package-lock.json
 ├─ package.json  
 ├─ README.md
 └─ tsconfig.json

はい、それでは本当の本編？はじまります。
まず、プロジェクト作成します。
インストール方法、依存関係、git初期化、TypeScriptオプションの選択は各自にお任せします。

# create a new project with npm
npm create astro@latest

# create a new project with pnpm
pnpm create astro@latest

# create a new project with yarn
yarn create astro

インストールが終わるとディクレクトリ構造は下記のようになってると思います。

ディレクトリ構成(初期)

astro-project
 ├─ node_modules
 ├─ public
 ├─ src
 ├─ .gitignore
 ├─ astro.config.mjs
 ├─ package-lock.json
 ├─ package.json  
 ├─ README.md
 └─ tsconfig.json

プラグインをインストールの巻

よく使うやつです。
他にもオススメのあったらコッソリ私にだけ教えてください。何卒です。

astro.config.mjsを編集の巻

ここでやってることは下記の通りになります。

npm run devで起動させたあとに自動でブラウザを立ち上げる
他の端末からもローカルサーバを接続可能にさせる
インテグレーションの設定
最終的にassetsフォルダに各ファイルを出力させる。

astro.config.mj

import { defineConfig } from 'astro/config';
import compress from 'astro-compress';
import relativeLinks from 'astro-relative-links';

export default defineConfig({
  server: {
    // 他の端末からローカルサーバを確認させせたいので、hostをtrueにする
    host: true,
    // 開発サーバーが立ち上がったらブラウザを自動で開かせる
    open: true,
  },
  integrations: [
    // compressの設定はお好みで！
    compress({
      html: true,
      svg: true,
      png: true,
      jpeg: true,
      jpg: true,
    }),
    relativeLinks(),
  ],
  // 多分パワープレイ？してます！
  build: {
    assets: 'assets/js',
  },
  vite: {
    build: {
      // minifyを有効にする場合はtrueにする
      minify: false,
      rollupOptions: {
        output: {
          assetFileNames: (assetInfo) => {
            let extType = assetInfo.name.split('.').at(-1);
            if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
              extType = 'images';
            }
            if (/css|scss/i.test(extType)) {
              extType = 'styles';
            }
            return `assets/${extType}/[hash][extname]`;
          },
          entryFileNames: 'assets/js/[hash].js',
        },
      },
    },
  },
});

あとで説明しますがここ覚えててください。

 build: {
    assets: 'assets/js',
  }

publicを編集の巻

下記のようにpublicフォルダの中にassetsフォルダを作り、その中にimagesフォルダを作成します。
imagesフォルダの中にはお好きな名前のフォルダを作って好きな画像を入れてください。

 ├─ public/
 │  └─ assets/
 │     └─ images/
 │

srcを編集の巻

srcフォルダも編集します。
jsフォルダを配置する以外の構成は各自お好きのようにしてください。
※ここでは例としてpagesフォルダにaboutフォルダを作成してます!

 ├─ src
 │  　├─ components/
 │  　│　　　　├─ layouts/
 │  　│　　　　├─ page/
 │  　│　　　　└─ ui/
 │  　│　　　　
 │  　├─ js/
 │  　├─ pages/
 │  　│　　　　 ├─ about/
 │  　│   │　  └─ index.astro
 │  　│   └─ index.astro
 │  　├─ styles/
 │

tsconfig.jsonを編集の巻

値の指定がないままモジュールをインポートした場合にエラーを出したり、モジュールのベースパス、エイリアスの設定をしてます。

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "importsNotUsedAsValues": "error",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

ビルドしてみる

これまでの設定を終えると
現状のディレクトリはこうなってると思います。

ディレクトリ構成(調整済み)

astro-project
 ├─ node_modules
 ├─ public
 │  ├─ assets/
 │  │ └─ images/
 │  └─favicon.svg
 ├─ src
 │  ├─ components/
 │  │　　　　├─ layouts/
 │  │　　　　├─ page/
 │  │　　　　└─ ui/
 │  │　　　　
 │  ├─ js/
 │  ├─ pages/
 │  │　　　　 ├─ about/
 │  │   │　  └─ index.astro
 │  │   └─ index.astro
 │  └─ styles/
 ├─ .gitignore
 ├─ astro.config.mjs
 ├─ package-lock.json
 ├─ package.json  
 ├─ README.md
 └─ tsconfig.json

それではnpm run buildでビルドしてみましょう！
どうでしょうか？
出力されたdistフォルダの中身が
最初に確認した完成図と同じ様になってると思います。

完成図

astro-project
 ├─ dist
 │  　├─ about/
 │  　│   └─ index.html
 │  　├─ assets/　　
 │  　│   ├─ images/
 │  　│   ├─ js/
 │  　│　　　　 └─ styles/
 │  　└─ index.html

やったね🫶

？？？

astro.config.mjsを編集の巻で

あとで説明しますがここ覚えててください。
build: {assets: 'assets/js',} 

と説明したと思います。
JavaScriptをimport/exportでファイルを読み込んでる場合、
ここを記述しないで
npm run buildでビルドをすると、うまく行ってる様に見えるのですが
下記のように_astroというフォルダができると思います。
気持ち悪いですよね。

astro-project
 ├─ dist
 │  　├─ _astro/
 │  　├─ about/
 │  　│   └─ index.html
 │  　├─ assets/　　
 │  　│   ├─ images/
 │  　│   ├─ js/
 │  　│　　　　 └─ styles/
 │  　└─ index.html

ただこの記述はパワープレイで出力先をしていしてる気がするのでもっと良い方法があれば教えて頂けると幸いです！

まとめ

お疲れ様でした。
とりあえず、今回ご紹介した環境構築を使えば、チュートリアルよりは快適に作業ができるのではないでしょうか？
いや、こんなの知ってるわ！当たり前の情報をさぞ自分が見つけたように記事するな！って感じだったらほんまゴメンな。
最後に文章が稚拙であり、分かりにくい箇所が多々あったかと思います。
その点については申し訳ございません。(ガチ謝罪)