새로고침시 404 문제

https://www.inflearn.com/questions/640711/url%EB%A1%9C-%EC%A7%81%EC%A0%91-%EC%A0%91%EA%B7%BC%EC%8B%9C-404-return-%EB%AC%B8%EC%A0%9C

위에 질문드린분과 완전 동일한 증상입니다. 다른점은 https://chanyoung-dev.github.io/ 는 이미 사용중이어서 https://chanyoung-dev.github.io/vuePost/ 도메인에 배포하기 위해 vite.config.js에서 base설정한 것(base: '/vuePost/')과 history: createWebHistory('/vuePost/') 있습니다.

https://chanyoung-dev.github.io/vuePost/ 에 접속하여 /posts라우트 영역에 들어가면 정상적으로 되지만 해당 페이지에서 새로고침을 한다든가 주소창에 직접 https://chanyoung-dev.github.io/vuePost/posts 로 들어가면 github 404페이지가 나타납니다. 로컬에서는 주소창에 http://localhost:5173/vuePost/posts 치면 정상적으로 접속됩니다.

github pages와 github action을 통해 배포해서 https://vitejs.dev/guide/static-deploy.html#github-pages 를 참고했는데도 안되네요 ㅜㅜ

아래는 제가 설정한 부분입니다

vite.config.js

import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  base: '/vuePost/',
});

route 부분

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import AboutView from '@/views/AboutView.vue';
import PostCreateView from '@/views/posts/PostCreateView.vue';
import PostDetailView from '@/views/posts/PostDetailView.vue';
import PostEditView from '@/views/posts/PostEditView.vue';
import PostListView from '@/views/posts/PostListView.vue';

const routes = [
  {
    path: '/',
    component: HomeView,
  },
  {
    path: '/about',
    component: AboutView,
  },
  {
    path: '/posts',
    component: PostListView,
    name: 'PostList',
  },
  {
    path: '/posts/create',
    component: PostCreateView,
    name: 'PostCreate',
  },
  {
    path: '/posts/:id',
    component: PostDetailView,
    name: 'PostDetail',
  },
  {
    path: '/posts/:id/edit',
    component: PostEditView,
    name: 'PostEdit',
  },
];

const router = createRouter({
  history: createWebHistory('/vuePost/'),
  routes: routes,
});

export default router;

git action

https://vitejs.dev/guide/static-deploy.html#github-pages 와 동일

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ['master']

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # Upload dist repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

git 주소: https://github.com/ChanYoung-dev/vuePost

하루죙일 삽질 뒤에 질문 남깁니다 감사합니다

인프런 커뮤니티 질문&답변