VS Remote-Containers を使用した簡単な Astro 環境

VS リモート コンテナーを使用してさまざまな言語をテストし始めましたが、これが Astro.build の新しい開発環境をセットアップする簡単な方法であることがわかりました。

ステップ 1 - フォルダーを作成する

mkdir astrodev

cd astrodev

astrodev フォルダーの中で、.devcontainer という名前の新しいサブフォルダーを作成します。

「Dockerfile」を作成します.

FROM node:16-alpine 

WORKDIR /app

RUN apk update && \
    apk add git && \
    apk add openssh

ENV HOST 0.0.0.0
EXPOSE 3000

devcontainer.json」という名前の新しいファイルを作成します

{
    "name":"astro",
    "build": { "dockerfile": "Dockerfile" },
	"forwardPorts": [
		3000
	],
	"customizations": {
		"vscode": {
			"extensions": [
				"astro-build.astro-vscode"
			]
		}
	}
}

実行すると、VS コードは astro 拡張機能を自動的にインストールします。

あとは、Visual Studio Code を開いて astrodev フォルダーを開くだけで、remote-container で開くかどうかを尋ねられます。

初めて実行するときは、docker イメージをダウンロードしてビルドする必要があるため、しばらく時間がかかります。

イメージのビルドが完了したら、VS Code 内から新しいターミナルを開き、nodeがインストールされていることを確認できます。

node --version

正しくインストールされていることを確認したら、公式の Astro.build ドキュメントを参照して、新しいプロジェクトを作成できます。

yarn create astro
.....
.....
cd <my-astro-project>
yarn dev

astro をお楽しみください。

現在、個人サイト dabiddo.net の制作に使用しています。