GitLab PagesでTOP画面以外もURL直打ちで画面遷移できるようにする

GitLab PagesにAngularプロジェクトをデプロイする場合、単純にpublicにビルドファイルをコピーするだけだと、URL直打ちした場合やF5でリロードした際にTOP画面以外は404エラーになります。

それを解決する方法をメモしておきます。

解決策

index.htmlをコピーして404.htmlを作成します。
こうすることで、TOP画面以外の場合に404.htmlにアクセスされます。
中身はindex.htmlのため、正常にルーティングされるというわけですね。

.gitlab-ci.yml

image: node:latest

pages:
  stage: deploy
  script:
  - npm install -g @angular/cli@latest
  - npm install
  - ng build --prod --aot
  - mkdir public
  - mv dist/project/* public/
  # index.htmlをコピーして404.htmlを生成する
  - cp public/index.html public/404.html
  artifacts:
    paths:
    - public
  only:
  - master

GitLab Issue

ここに書いてありました。
https://gitlab.com/gitlab-org/gitlab-pages/issues/23#note_57499396