astro 경로 문제

해결 방안

목표

• astro 사이트를 github pages에서 배포해도 경로 문제가 안 생기게 조치하기
• 만약에 생겼을 때 어디를 고쳐야 하는지 파악하기, 정보를 찾을 키워드 기록하기

배경

github에서 사이트를 배포하는데 저장소마다 따로 주소를 지정하고 싶었다.
근데 이렇게 주는 경우 계정에 따른 주소에 저장소 이름이 하위 경로로 붙어서 배포된다.
블로그 사이트를 빌드할 때, 아스트로가 이 하위 경로를 반영하지 않고 주소를 생성하기 때문에
링크들이 잘못된 주소를 가지게 된다.

원하는 결과

배포시 적절한 주소를 가지게 하기

이를 위해 한 일

빌드환경에서 아스트로로 하위 경로 전달

빌드환경에서 환경변수 설정

주소를 만들 때 쓰일 하위 경로명을 전달하기 위해 환경변수를 설정한다.

github에서 배포하는 환경에서 환경변수를 설정하기 위해 workflow 파일을 수정한다.
github workflow파일을 읽고 빌드환경에서 일을 하는데
이 때 환경변수 이름은 Astro가 사용하는 Vite의 설정에 따라서 VITE_로 시작해야 한다.
관련 문서

# workflow 파일에 작성한 예시
- name: Use environment variables
  run: |
      echo "VITE_GITHUB_REPOSITORY_OWNER=$GITHUB_REPOSITORY_OWNER" >> .env
      echo "VITE_GITHUB_REPOSITORY=$GITHUB_REPOSITORY" >> .env
  env:
      GITHUB_REPOSITORY: ${{github.repository}}
      GITHUB_REPOSITORY_OWNER: ${{github.repository_owner}}

설정된 환경변수를 아스트로에서 불러오기

이렇게 설정된 환경변수를 불러올 때 작성하기 편하게 명시할 수 있다.
관련 문서

interface ImportMetaEnv {
    // 위에서 설정한 환경변수를 선언해 둠.
    readonly VITE_GITHUB_REPOSITORY_OWNER: string;
    readonly VITE_GITHUB_REPOSITORY: string;
}

interface ImportMeta {
    readonly env: ImportMetaEnv;
}

불러올 때는 import.meta.env.*로 불러온다.

// 환경변수 불러오기
const owner = import.meta.env.VITE_GITHUB_REPOSITORY_OWNER;
const repoName = import.meta.env.VITE_GITHUB_REPOSITORY;

아스트로에서 하위 경로 설정 추가

불러온 환경변수를 설정에 추가하기

아스트로 설정 파일, astro.config.ts에 base 설정을 추가하기
관련 문서
github에서 빌드할 때만 하위 경로가 추가되게 하는 함수를 추가한다.

import { defineConfig } from "astro/config";
//...

// env vars for github pages
const owner = import.meta.env.VITE_GITHUB_REPOSITORY_OWNER;
const repoName = import.meta.env.VITE_GITHUB_REPOSITORY;

// 환경변수가 설정되어 있는 환경에만 하위 경로를 반환하는 함수
function getBaseUrl() {
    if (typeof owner === "string" && typeof repoName === "string") {
        return repoName.substring(owner.length);
    }
    return ".";
}

// astro 설정에 base 옵션 추가
export default defineConfig({
    //...
    base: getBaseUrl(),
    //...
});

하위 경로 설정을 반영하기

추가된 base 설정은 다른 곳에서 import.meta.env.BASE_URL로 불러올 수 있다.
링크의 주소를 설정할 때, 불러온 환경변수를 넣어서 설정한다.

사족

이거랑 이거는 어떤 차이가 있나?

  // 후
    <a href=`./posts/${post.slug}/` class="cactus-link" data-astro-prefetch>
    {post.data.title}
  </a>
    // 전
    <a href={`./posts/${post.slug}/`} class="cactus-link" data-astro-prefetch>
    {post.data.title}
  </a>

{}, 객체인지 ` ` 템플릿 리터럴인지의 차이

subpath, 하위 경로

• subdomain, 서브도메인