다음을 배치하다.js GitHub 페이지에 적용

이 블로그는 내가 React에서 HTML, CSS, 안내에 의존하는 사이트를 재건하는 시리즈의 일부분이다.js는 다음을 사용합니다.js 프레임워크는 성능을 향상시키고 원가를 낮추며 나의 업무 절차를 증가시켜 미래의 변화를 위한 것이다.

2021 Update
I have moved Wallis Consultancy from GitHub Pages to Vercel. . Essentially, Next.js integrates with Vercel a lot better than with GitHub Pages.
I've kept a version of Wallis Consultancy hosted on GitHub pages for this blog and have updated all links to Wallis Consultancy below.
Having said that, GitHub Pages is 100% still a good place to host your Next.js project!

완료된 웹 사이트(GitHub 페이지로 관리): https://james-wallis.github.io/wallisconsultancy/
소스 코드: https://github.com/james-wallis/wallisconsultancy

소개

월리스 컨설팅 회사의 재실시는 다음 단계로 접어들었다.js 응용 프로그램이 완료되었습니다.이 박문은 다음 단계의 과정을 기록했다.js 프로젝트를 GitHub 페이지에 호스팅합니다.여기에는 다음이 포함됩니다.

를 사용하여 다음을 변환합니다.js 프로젝트에서 정적 사이트로.

Travis 파이프라인을 구축하여 사이트를 구축하고 next export지사로 전송한다.

기술 개요

GitHub 페이지

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub optionally runs the files through a build process and publishes a website.

GitHub Pages

트라비스

Travis CI is a hosted continuous integration service used to build and test software projects hosted at GitHub and Bitbucket.

그것은 개원 프로젝트에 무료이며 자동으로 Github와 통합된다.당신이 해야 할 일은 등록하고 gh-pages 파일을 추가하면 시작할 수 있습니다.
Travis CI

다음js 내보내기

next export allows you to export your app to static HTML, which can be run standalone without the need of a Node.js server.

HTML을 .travis.yml 디렉토리에 생성합니다.그곳에서 응용 프로그램을 실행하기 위해 serve 등의 도구를 사용할 수 있습니다.
현재 이 블로그에서 사용하는 기술을 소개했으니 다음 것을 배치합시다.js 응용 프로그램이 GitHub 페이지로 이동합니다.

Travis 구축 작성

Travis를 GitHub 저장소에 연결하는 것은 작성out처럼 간단합니다.다음은 이 과정과 Travis 구축에서 비밀 환경 변수를 어떻게 사용하는지 소개합니다.

Github 저장소의 맨 위 디렉토리에 .travis.yml 파일을 생성합니다.

다음을 추가합니다(주석 없음).

language: node_js # Node.js based project
node_js:
  - 12 # Level of Node.js to use
cache:
  directories:
  - node_modules # Cache the node_modules folder for quicker build times
script:
  - npm run build # Runs next build
  - npm run export # Runs next export and generates the out directory
  - touch out/.nojekyll # Creates a file telling Github not to build the project using Jekyll
deploy:
  provider: pages # Informs Travis this is a deployment to GitHub Pages
  skip_cleanup: true # Prevents Travis from resetting the working directory made during the build
  github_token: $github_token # GitHub access token to use when pushing to the gh-pages branch
  local_dir: out # Directory to push to the gh-pages branch
  on:
    # Only deploy when the build is on master or main branch - two common default branch names
    # If you're using a different branch name, add it here
    all_branches: true
    condition: $TRAVIS_BRANCH =~ ^(master|main)$

자세한 내용은 을 참조하십시오. official Travis Github Pages docs

저장소에 .travis.yml 를 추가한 후 Travis CI 설정에 .travis.yml 변수를 추가해야 합니다.

먼저 Creating a personal access token - GitHub Docs의 설명에 따라 API 영패 주의를 받습니다. 제 저장소는 이 블로그를 만들 때 개인 것이기 때문에 전체github_token 범위를 사용했습니다.단, gh-pages 범위만 사용할 수 있습니다.

GitHub 재구매의 전체 범위

브라우저에서 열립니다repo.

추가 옵션 -> 설정으로 이동합니다.

Travis 설정

이 나타나면 public_repo라는 새 https://travis-ci.com/github/{your_username}/{your_repository} 를 추가하고 방문 영패를 environment variable 로 사용합니다.(선택 사항) 마스터 브랜치에서만 사용할 수 있도록 합니다.

Travis 설정 환경 변수

현재 Travis 설정과 github_token 첫 번째 Travis 구축을 시작할 준비가 되어 있습니다.이를 위해 새 value 를 주 지점에 발표하면 자동으로 시작됩니다.만약 이렇게 하셨다면, Travis ci UI에서 새로운 master 구축을 시작하십시오.

아이고, 이것은 많은 설정이지만, 이미 완성되었다.웹 사이트를 볼 수 있도록 GitHub 페이지를 설정합니다.

GitHub 페이지 설정

이로써 Travis 구축은 성공적으로 완료되었고 저장소에 .travis.yml 지점을 만들었을 것입니다.정적 사이트 코드는 GitHub 페이지 같은 곳에서만 사용할 수 있다는 뜻이다.

당신은 .travis.yml 지점을 볼 수 있을 것입니다.
저장소에 GitHub 페이지를 활성화하려면 다음이 필요합니다.

Github 저장소의 설정 탭으로 이동(예: https://github.com/james-wallis/wallisconsultancy/settings

GitHub 페이지 섹션으로 아래로 스크롤합니다.

소스 탭에서 선택gh-pages
GitHub 페이지 설정

시간이 지나면 GitHub에서 제공하는 URL을 통해 웹 사이트에 액세스할 수 있어야 합니다(위의 Travis CI 단계로 돌아갈 수 없는 경우).이것이 바로 GitHub 페이지가 있는 정적 사이트를 호스팅하는 데 필요한 모든 설정입니다.
아니면...

뭔가 이상해...CSS 스타일

만약 상기 두 부분을 따른다면, 당신의 사이트를 볼 수 있기를 기대할 것입니다. 왜냐하면 그것은 당신의 로컬 기계에서 보기 때문입니다.
반대로 내용이 정확하지만 스타일이 없는 사이트를 받을 수도 있다.또한 페이지 사이를 탐색하려고 시도하면 해결할 수 없습니다.다음과 같이 보입니다.

CSS가 없는 Wallis 컨설팅 사이트
왜 그러냐고요?
다음js는 CSS, JavaScript 파일 및 이미지를 gh-pages 에 호스팅하기를 원하지만, GitHub 페이지의 경우 이 사이트는 하위 경로 gh-pages branch 에 호스팅됩니다.이로 인해 사이트에서 의존 항목을 찾을 수 없거나 다른 페이지로 연결할 수 없습니다.user.github.io/를 실행하고 serve 를 사용하여 출력 디렉터리의 부모 디렉터리(일반적으로 user.github.io/wallisconsultancy에 서비스를 제공하여 로컬에서 디렉터리를 다시 만들 수 있습니다.나next export에 대해 출력 디렉터리는 out입니다.
네, 그런데 저희가 그것을 고칠 수 있을까요?
그럼요!
참고: 사용자 정의 도메인에서 호스팅하려면 GitHub 페이지와 같은 하위 경로를 사용하지 않는 한 이 문제는 사라집니다.이 블로그의 나머지 부분을 건너뛰고 다음 블로그를 읽으십시오.

다음 단계.js assetPrefix 및 basePath에서 구조까지

다음 절은 두 개의 소절로 나눌 것이다.첫 번째 중점은 serve wallisconsultancy를 사용하여 CSS 스타일과 이미지와 같은 다른 자산을 복구하는 것이다.두 번째 중점은 서로 다른 페이지의 링크에 고정시키는 것이다. 먼저 환경 변수를 루트 접두사로 사용한 다음에 wallisconsultancy/out를 사용한다. 이것은 Next.js 9.5에 도입된 새로운 설정 변수이다.

CSS 및 기타 자산 수정

CSS 및 기타 자산 복구는 간단합니다.

열거나 생성next.config.js file.

에 assetPrefix 를 추가합니다. 여기서 GitHub 페이지 하위 경로의 값은 한 쪽에 정사각형이 있습니다.나에게 있어서 이것은 다음과 같다.

module.exports = {
    assetPrefix: '/wallisconsultancy/',
}

이 간단한 변경을 통해 이 변경 사항을 GitHub 페이지로 전송하고 원하는 페이지 레이아웃을 볼 수 있어야 합니다.

페이지 간 링크 고치기

다음js9.4 이하
다음 전에js9.5, 페이지 링크를 복구하는 것은 사용자가 만든 모든 basePath 을 assetPrefix 로 수정하는 것을 의미합니다.이를 실현하는 가장 깨끗한 방법은 다음과 같다.

열거나 생성next.config.js file.

GitHub Pages 하위 경로의 값인 환경 변수를 추가하고 시작 부분에 정사각형을 추가합니다.나에게 있어서 이것은 다음과 같다.

module.exports = {
    env: {
        BACKEND_URL: '/wallisconsultancy',
    },
}

수정module.exports 구성 요소는 접두사를 사용하여 다음과 같이 변경합니다.

<Link href={`${process.env.BACKEND_URL}${href}`}>{href}</Link>

따라서about 페이지의 링크에 대해<Link>의prefix는

href="/about"

... 에 이르다

href={`${process.env.BACKEND_URL}/about`}

이것은 좀 혼란스럽지만, 다행히도 다음 단계에 있다.js9.5는 도입BACKEND_URL 변수를 통해 이 과정을 간소화했다.
다음js 9.5 이상<Link>을(를) 각각href,Next.js 9.5 introduces the basePath variable에 추가하는 것이 아닙니다.이를 사용하려면 다음을 수행해야 합니다.

열거나 생성next.config.js file.

<Link> 에 GitHub 페이지 하위 경로의 값을 정사각형으로 시작하도록 basePath 를 추가합니다.나에게 있어서 이것은 다음과 같다.

module.exports = {
    basePath: '/wallisconsultancy',
}

최종 백엔드 URL

<Link> 및 basePath mymodule.exports의 조합은 다음과 같습니다.

module.exports = {
    basePath: '/wallisconsultancy',
    assetPrefix: '/wallisconsultancy/',
}

상금: 있음next.config.js에서 next-optimized-images를 소개했는데 이것은 이미지를 압축하여 사이트의 성능을 향상시킬 수 있다.
GitHub 페이지 하위 경로 문제를 해결하기 위해 imagesPublicPath 변수를 assetPrefix 에 추가합니다.이 수정을 통해 다음과 같이 보입니다.

const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');
module.exports = withPlugins([
  [optimizedImages, {
    mozjpeg: {
      quality: 80,
    },
    pngquant: {
      speed: 3,
      strip: true,
      verbose: true,
    },
    imagesPublicPath: '/wallisconsultancy/_next/static/images/',
  }],
  {
    basePath: '/wallisconsultancy',
    assetPrefix: '/wallisconsultancy/',
    env,
  },
]);

이렇게 하면 제 사이트는 GitHub 페이지에 위탁 관리할 수 있습니다. 보기에 매우 좋습니다. 저는 예상대로 페이지 사이를 내비게이션할 수 있습니다.너는 이제 세계 각지의 누구에게도 너의 사이트를 보여줄 수 있다.
Here's the link to Wallis Consultancy again to see the result of the above steps!

종합하여 서술하다

이 블로그에서 나는Travis 구축을 구축하는 방법을 보여 주었다. 이 구축은 다음 구축을 구축하고 내보낼 것이다.js 응용 프로그램을 정적 사이트로 변환합니다.그리고 저는 GitHub 페이지를 사이트의 숙주로 설정하고 숙주 사이트의 하위 경로로 인해 발생한 CSS와 링크 문제를 복구했습니다.
이 시리즈의 다음 편과 마지막 블로그에서 GitHub 페이지에서 사용자 정의 영역을 사용하는 방법을 보여 드리겠습니다.