Vue 앱 호스팅: Vite, Vue Router history 모드

Q: Vue Router 페이지를 새로고침하면 "Not found"가 표시되는 이유는 무엇인가요?

history 모드 주소는 앱 안에만 존재합니다. 싱글 페이지 모드(lobsite.toml의 spa = true 또는 사이트 설정의 싱글 페이지 앱)를 켜면 해당 경로에서 index.html이 열립니다.

Q: Nuxt 사이트를 Lobsite에 배포할 수 있나요?

네, 생성된 사이트라면 가능합니다. npx nuxi generate를 실행한 다음 npx lobsite .output/public을 실행하세요. 서버 라우트처럼 Nuxt 서버가 필요한 페이지는 실행되지 않습니다.

Q: Vue 앱에서 "페이지를 찾을 수 없음" 뷰를 어떻게 표시하나요?

라우트 끝에 캐치올 라우트 { path: "/:pathMatch(.)", component: NotFound }를 추가하세요. 싱글 페이지 모드에서는 알 수 없는 모든 페이지 경로가 앱에 도달하므로 라우터가 표시할 내용을 결정합니다.

npm create vue@latest로 만든 Vue 앱은 Vite가 dist/로 빌드합니다. index.html 하나와 모든 페이지를 그리는 JavaScript입니다. Lobsite는 그 폴더를 호스팅합니다. npm run build를 실행한 다음 npx lobsite를 실행하면 HTTPS가 적용된 *.lobsite.app 주소로 앱이 공개됩니다. 싱글 페이지 모드를 켜면 Vue Router의 history 모드가 작동합니다.

작동 방식

npm run build로 앱을 빌드하세요. Vite가 dist/에 작성합니다.
프로젝트에서 npx lobsite를 실행하세요. Vite가 빌드에 복사하는 public/이 아니라 dist/를 배포합니다. 첫 배포는 계정이 필요 없으며 6시간 동안 유지됩니다.
Vue Router를 위해 싱글 페이지 모드를 켜세요. lobsite.toml의 spa = true 또는 사이트 설정의 싱글 페이지 앱입니다. 가져오기 링크로 무료 계정에 사이트를 유지하세요.

Vue Router history 모드

import { createRouter, createWebHistory } from "vue-router";

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

**createWebHistory()**는 /projects/7 같은 깔끔한 주소를 제공합니다. 직접 열면 서버에 존재하지 않는 파일을 요청하지만, 싱글 페이지 모드가 index.html로 응답하고 Vue Router가 올바른 뷰를 표시합니다.
createWebHashHistory()(/#/projects/7 같은 주소)는 서버가 /만 보므로 싱글 페이지 모드 없이 작동합니다. 공유와 검색 엔진에는 깔끔한 주소가 더 좋습니다.
캐치올 라우트(path: "/:pathMatch(.*)*")는 앱 자체의 "페이지를 찾을 수 없음" 뷰를 두는 곳입니다. 싱글 페이지 모드에서는 알 수 없는 모든 페이지 경로가 앱에 도달하기 때문입니다.

Nuxt와 Vue CLI

Nuxt는 npx nuxi generate로 정적 사이트를 .output/public/에 빌드합니다. 이 폴더는 자동으로 찾지 못하므로 한 번 npx lobsite .output/public으로 전달하면 lobsite.toml에 기억됩니다. 모든 페이지가 자체 파일로 생성되므로 싱글 페이지 모드는 Nuxt가 생성하지 않은 라우트에만 필요합니다. Nuxt의 서버 라우트와 서버 렌더링에는 Node를 실행하는 호스트가 필요합니다.
Vue CLI(@vue/cli-service)는 유지 보수 모드이며 새 프로젝트는 Vite를 사용합니다. 기존 Vue CLI 프로젝트는 dist/로 빌드되며 같은 방식으로 배포됩니다.

싱글 페이지 앱

lobsite.toml의 spa = true 또는 대시보드의 스위치 하나면 됩니다. 딥 링크로 앱이 열리고, 없는 파일은 여전히 404입니다.

변경된 파일만 업로드

파일은 해시로 저장됩니다. 변경되지 않은 사이트를 다시 배포하면 0바이트가 업로드됩니다.

모든 배포에 URL 제공

공개 전에 미리 보세요. 리디렉션까지 포함해 클릭 한 번으로 롤백합니다.

어디서나 HTTPS

모든 사이트는 첫 배포부터 HTTPS가 적용된 *.lobsite.app 주소를 받습니다.

바로 작동하는 폼

폼의 대상을 /_lobsite/forms/contact로 지정하세요. 스팸 필터링이 포함됩니다.

계정 없이 체험

계정 없는 배포는 6시간 동안 공개됩니다. 가져오기 링크로 무료로 유지할 수 있습니다.

Vue 호스트 비교

	Lobsite	Netlify	Vercel	GitHub Pages
Vue Router history 모드	`spa = true` 또는 대시보드 스위치	`_redirects` 규칙	`vercel.json`의 리라이트	아니요: hash 모드 또는 상태 404로 제공되는 `404.html`
배포 후 없는 스크립트 파일	404, 명확한 오류	앱의 `index.html`	앱의 `index.html`	404
Nuxt 서버 렌더링	아니요	예	예	아니요
첫 배포 전 계정	불필요: 6시간 공개 후 무료로 유지	필요	필요	필요, 저장소도 필요
백엔드 없는 폼	예, 사이트가 계정에 있으면	예	아니요	아니요
커스텀 도메인	예, 무료	예	예	예

브라우저에서 실행되는 Vue 앱이라면 Lobsite는 명령어 하나로 dist/를 공개 주소로 만들며, history 모드는 설정 하나로 해결되고 배포마다 미리보기 URL이 제공됩니다.

자주 묻는 질문

Vue Router 페이지를 새로고침하면 "Not found"가 표시되는 이유는 무엇인가요?

history 모드 주소는 앱 안에만 존재합니다. 싱글 페이지 모드(lobsite.toml의 spa = true 또는 사이트 설정의 싱글 페이지 앱)를 켜면 해당 경로에서 index.html이 열립니다.

Lobsite의 Vue 앱은 hash 모드와 history 모드 중 무엇을 사용해야 하나요?

싱글 페이지 모드를 켠 history 모드입니다. 주소가 더 깔끔하고 검색 엔진이 별도의 페이지로 처리합니다. hash 모드는 서버 설정을 바꿀 수 없을 때만 가치가 있습니다.

Nuxt 사이트를 Lobsite에 배포할 수 있나요?

네, 생성된 사이트라면 가능합니다. npx nuxi generate를 실행한 다음 npx lobsite .output/public을 실행하세요. 서버 라우트처럼 Nuxt 서버가 필요한 페이지는 실행되지 않습니다.

Vue 앱에서 "페이지를 찾을 수 없음" 뷰를 어떻게 표시하나요?

라우트 끝에 캐치올 라우트 { path: "/:pathMatch(.*)*", component: NotFound }를 추가하세요. 싱글 페이지 모드에서는 알 수 없는 모든 페이지 경로가 앱에 도달하므로 라우터가 표시할 내용을 결정합니다.