한 달에 1달러 미만의 비용으로 정적 개인 웹사이트를 만드는 방법

이 게시물의 목표는 한 달에 1달러 미만의 비용으로 자신만의 정적 개인 웹사이트를 만드는 방법을 보여주는 것입니다. 알아요, 여러분은 아마도 "내가 방금 읽었던 거 맞죠?"라고 생각할 것입니다. 그랬어요! 물론 해당 목표에 도달하려면 주의해야 할 사항이 있지만, 웹 사이트 여정 초기에는 정적 웹 사이트를 호스팅하는 데 한 달에 0.01달러만 투자하면 됩니다. 이 게시물의 대상 독자는 JavaScript 경험이 있고 웹 개발에 대한 일반적인 이해가 있는 사람입니다. 해당 배경이 없더라도 걱정하지 마세요! 누구나 따라할 수 있도록 이 게시물의 아이디어와 개념을 최선을 다해 설명하겠습니다!

시작하기 전에 첫 번째 사이트를 만드는 데 사용할 다양한 용어를 이해하는 데 도움이 되는 몇 가지 정의를 살펴보겠습니다. Google Cloud에 사이트를 추가하는 과정을 진행하면서 다음 정의를 자유롭게 참조하세요.

• 웹사이트 도메인: yelp.com과 같이 인터넷에서 웹사이트를 식별하는 데 사용되는 주소입니다.
• 도메인 등록 공급자: 맞춤 도메인을 구입할 수 있는 도메인 공급자
• 정적 웹사이트: HTML, CSS, JavaScript 파일의 고정된 수의 조합으로 생성된 웹사이트
• Next.js: 서버 측 렌더링 및 정적 사이트 생성을 지원하는 React.js 프레임워크
• 저장 개체: 저장에 사용되는 엔터티로, 사진이나 비디오 또는 실제로는 다른 종류의 파일을 생각해 보세요.
• Google Cloud: 다양한 서비스를 제공하는 클라우드 컴퓨팅 플랫폼, 스토리지에 관심을 두고 있습니다.
• Google Cloud Storage: Google Cloud의 객체 스토리지 서비스로 웹사이트의 정적 파일을 저장하는 데 사용됩니다.
• 버킷(Google Cloud Storage): 웹사이트 파일을 보관하는 컨테이너

이 기사에서는 독자가 웹 사이트 개발 및 프로그래밍에 대한 기본 지식을 가지고 있다고 가정합니다. 나는 각 독자가 다음을 가지고 있다고 가정합니다.

• 웹 사이트 개발에 대한 기본 이해 - 웹 개발 소개(freecodecamp.org)
• NPM 경험
• React.js 및 Next.js 에 대한 초급 지식
• CLI를 통한 편안함
• 컴퓨터에 설치된 IDE - 예를 들어 VSCode를 사용합니다.

나는 목표를 점진적인 작업 덩어리로 쪼개서 더 나은 생각을 하는 경향이 있습니다. 웹 사이트를 만들 때 작업을 다음과 같이 구성해 보겠습니다.

1. 설정
2. 우리 사이트의 시작 코드
3. 우리 사이트에 대한 버킷 구성
4. 다음 단계 🙂

설정

자신만의 개인 웹사이트를 만들고 싶다면 시작하려면 도메인이 필요합니다. 처음에는 이를 사용하지 않을 것이지만 지금은 이를 수행하여 이후 문서 에서 사용자 정의 도메인을 사용할 수 있도록 하는 것이 좋습니다. 제 경우 제 도메인은 afro-cloud.com 이었지만 등록 공급자가 사용 가능한 도메인을 보유하고 있다면 마음에 드는 것을 무엇이든 선택할 수 있습니다. 사용할 수 있는 도메인 등록 공급자가 많이 있습니다. 개인적으로 GoDaddy를 사용했지만 사용 가능한 옵션의 하위 집합은 다음과 같습니다(저는 이러한 서비스와 관련이 없습니다).

• 고대디
• 블루호스트
• 정사각형 공간

이제 도메인을 설정했으므로 Google Cloud 계정을 만들고 결제를 활성화해 보겠습니다.

1. Google Cloud Console 로 이동
2. 기존 Google 계정을 사용하거나 새 계정을 만들어 콘솔에 들어가세요(Google Cloud를 사용하려면 필요함).
3. 화면 상단 표시줄의 프로젝트 선택 드롭다운을 클릭하여 새 프로젝트를 만듭니다.
4. '결제'로 이동하세요.
5. Google Cloud에서 제공하는 안내 에 따라 새 결제 계정을 만듭니다.

엄청난! 이제 결제가 활성화되었으므로 Google Cloud 서비스를 사용할 수 있습니다. 지금은 이 탭이 모두 준비되어 있지만 기사 후반부에서 이 페이지로 다시 돌아올 것이므로 편리하게 보관하세요.

우리 사이트의 시작 코드

이 문서에 설명된 단계를 수행하는 데 문제가 있는 경우 연락해 주시면 문제를 디버깅하는 데 최선을 다하겠습니다. 좋아, 문제를 해결한 후 계속 진행하겠습니다. 정적 내보내기 지원으로 인해 다른 React.js 프레임워크(또는 그냥 React)와 달리 Next.js를 사용할 것입니다. React.js 애플리케이션을 호스팅하기 위한 다양한 배포 옵션이 있지만 SEO 이점과 비용 절감 때문에 Google Cloud Storage와 Next.js 접근 방식을 공유하기로 선택했습니다. Next.js 정적 내보내기를 사용하면 프로덕션 빌드가 만들어질 때 HTML 파일에 해당하는 정적 자산(CSS 및 JS 파일)과 함께 경로별로 HTML 파일이 생성됩니다. 이는 보고 있는 페이지에 불필요한 JavaScript 번들을 로드하는 것을 방지할 수 있기 때문에 중요합니다. 즉, 페이지 로드 속도가 빨라집니다. "다음 빌드"를 실행하여 생성된 모든 파일은 "out" 폴더로 내보내집니다. 그러나 이것에 대해서는 나중에 더 자세히 설명합니다. 앱을 만들어 보겠습니다.

먼저, 우리 컴퓨터에 스타터 Next.js 프로젝트를 설치해 보겠습니다. 다행히 Next.js에는 Create React App과 같은 "create-next-app" 유틸리티가 있습니다. 워크플로를 시작하려면 다음 명령을 실행하면 됩니다.

npx create-next-app@latest

이 명령은 프로젝트에 대한 몇 가지 구성 옵션을 안내합니다(원하는 대로 자유롭게 선택하세요. 코드 생성만 필요합니다). 이 기사에서 사용할 옵션을 굵게 표시했습니다.

• 프로젝트 이름이 무엇인가요? 내 앱
• TypeScript를 사용하시겠습니까? 아니오 / 예
• ESLint를 사용하시겠습니까? 아니오 / 예
• Tailwind CSS를 사용하시겠습니까? 아니오 / 예
• `src/` 디렉토리를 사용하시겠습니까? 아니오 / 예
• 앱 라우터를 사용하시겠습니까? (권장) 아니요 / 예
• 기본 가져오기 별칭(@/*)을 사용자 정의하시겠습니까? 아니오 / 예

좋습니다. 이제 코드가 생겼습니다! node_modules 폴더가 채워져 애플리케이션을 실행하는 데 필요한 모든 종속성이 설치되어 있음을 알 수 있습니다. 프로젝트를 생성하는 데 사용한 것과 동일한 터미널 창에서 다음 명령을 실행해 보겠습니다. npm run dev . 그러면 애플리케이션을 로컬에서 볼 수 있도록 Next.js 개발 워크플로가 시작됩니다. Next.js는 컴퓨터에서 프로젝트를 볼 수 있는 URL을 제공합니다. 대부분의 경우 이는 http://localhost:3000 이지만 다른 웹 앱을 실행 중인 경우 3001과 같은 다른 포트를 선택할 수 있습니다. 링크를 클릭하면 다음과 같은 내용이 표시됩니다.

멋진! 우리는 스타터 애플리케이션을 실행 중입니다! 하지만 보다 고전적인 "Hello World" 예제를 수행하기 위해 시작 페이지를 제거해 보겠습니다. 다음을 포함하도록 src/app/page.tsx(또는 page.jsx) 파일을 업데이트합니다.

 import styles from "./page.module.css"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> </div> </main> ); }

파일을 저장하고 애플리케이션을 실행하는 브라우저 탭으로 돌아가서 페이지를 다시 로드하세요. 화면에 "Hello world"가 표시되어야 합니다! 이제 정적 내보내기가 작동하도록 다시 돌아가 보겠습니다. 이 기능을 활성화하려면 next.config 파일을 구성해야 합니다. nextConfig 선언을 다음과 같이 업데이트합니다.

const nextConfig = { output: "export", };

이는 빌드 프로세스 중에 Next.js에 애플리케이션 내의 각 경로에 해당하는 개별 HTML 파일을 생성하도록 지시합니다. 현재로서는 하나의 페이지만 있으므로 정적 내보내기의 이점을 설명하기 위해 다른 페이지를 추가하겠습니다. app/ 디렉터리 내에 "test"라는 새 디렉터리를 만듭니다. 새로 생성된 디렉터리 내에 page.tsx(또는 page.jsx) 파일을 추가하고 다음 코드를 추가합니다.

 export default function Test() { return ( <main> <p>Hello test!</p> </main> ); }

이제 테스트 페이지가 있으므로 홈 페이지에서 해당 페이지에 대한 링크를 추가해 보겠습니다. src/app/page.tsx(또는 page.jsx)를 열고 다음과 같이 파일을 업데이트합니다.

 import Link from "next/link"; import styles from "./page.module.css"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> <Link href="/test">Test Page!</Link> </div> </main> ); }

새로 업데이트된 파일을 저장하고 애플리케이션을 실행하는 브라우저 탭으로 돌아가서 페이지를 다시 로드하세요. "테스트 페이지!"라는 새 링크가 표시됩니다. 해당 링크를 클릭하면 화면의 내용이 "Hello test!"로 변경되어야 합니다. 잘했어요. 이제 애플리케이션에 두 개의 경로가 생겼습니다. 이제 우리가 이야기했던 정적 내보내기 기능의 출력을 확인해 보겠습니다. 터미널 창으로 돌아가서 "npm run build"를 실행하세요. 이 명령은 작업을 위한 프로덕션 준비 빌드를 생성하고 프로젝트 루트에 있는 디렉터리에 결과를 저장하는 "next build" 명령을 실행합니다. out 디렉터리를 검사하면 다음과 같은 내용을 볼 수 있습니다.

• _next: 사이트를 실행하는 데 필요한 정적 자산이 포함되어 있습니다. 각 HTML 페이지에 대한 JavaScript 및 CSS 덩어리를 생각하세요(예: 404.html: Next.js가 생성하는 기본 404 페이지입니다)
• favicon.ico: 우리 사이트의 웹사이트 아이콘
• index.html: 루트 페이지의 HTML 파일(src/app/page.tsx 또는 page.jsx)
• index.txt: index.html 페이지의 리소스 매핑이 포함된 파일
• test.html: 루트 페이지의 HTML 파일(src/app/test/page.tsx 또는 page.jsx)
• test.txt: test.html 페이지의 리소스 매핑이 포함된 파일

정말 잘했어요 여러분. 이제 사이트를 실시간으로 볼 수 있도록 기어를 바꿔 Google Cloud에 코드를 업로드해 보겠습니다.

우리 사이트에 대한 버킷 구성

이제 코드가 준비되었으므로 Google Cloud가 인터넷에서 사이트를 제공할 수 있도록 코드를 Google Cloud Storage에 업로드해야 합니다. Google Cloud 탭으로 돌아가겠습니다.

화면 왼쪽에 있는 햄버거 메뉴를 열고 "클라우드 스토리지"를 선택하세요. 화면 상단에 "CREATE" 버튼이 표시됩니다. 생성 워크플로를 시작하는 항목을 클릭하겠습니다. 아직 사용자 정의 도메인을 사용하지 않을 것이므로 버킷 이름을 원하는 대로 지정하되 고유성 제한에 유의하세요. 저는 "somerandombucket123"을 사용하겠습니다. 다음으로 우리는 미국(이 포스트를 쓰고 있는 곳) 내에서 다중 지역 옵션을 사용할 것이지만 사용 사례에 맞게 자유롭게 조정할 수 있습니다. 그런 다음 미리 채워져 있어야 하는 표준 기본 클래스 옵션을 선택합니다. 다음 옵션은 버킷을 인터넷을 통해 공개적으로 액세스할 수 있도록 할지 여부와 관련이 있습니다. 이 경우 이러한 파일을 최종 사용자에게 제공하고 싶기 때문에 인터넷을 통해 모든 파일에 액세스할 수 있도록 "이 버킷에 공개 액세스 방지 적용"을 선택 취소해야 합니다. 비용을 낮게 유지하기 위해 "균일한" 액세스 제어를 선택하고 "데이터 보호" 제품은 선택하지 않겠습니다. 그런 다음 "만들기" 버튼을 누르겠습니다.

이제 버킷을 생성했으므로 사용자가 버킷 파일을 볼 수 있도록 새 권한을 추가해야 합니다. "권한" 탭을 선택하고 "접근 권한 부여" 버튼을 클릭하세요. "allUsers"의 "새 주체" 입력 유형 내에서 "환경 및 스토리지 개체 뷰어"에 대한 "Cloud Storage" 아래의 역할을 선택합니다.

버킷을 공개할지 여부를 묻는 대화 상자가 열리므로 공개 액세스 허용을 선택합니다. 따라서 공개 액세스 허용을 선택합니다. 이제 이 버킷의 파일에 공개적으로 액세스할 수 있습니다. 버킷 세부정보 페이지에서 뒤로 화살표를 클릭하여 개요 페이지로 돌아갑니다. 우리가 사용한 구성 옵션으로 새로 생성된 버킷이 표시되어야 합니다. 다음으로 웹사이트의 버킷에 지시해야 하며 새로 생성된 버킷 행의 점 3개를 클릭하여 이를 수행할 수 있습니다. "웹사이트 구성 편집"을 선택하면 다음과 같은 내용이 표시됩니다.

색인 페이지 입력에는 "index.html"을 입력하고 오류 페이지 입력 유형에는 "404.html"을 입력합니다. 이 파일은 우리가 원하고 곧 사용할 Next.js 애플리케이션의 빌드 출력과 일치한다는 것을 알 수 있습니다. 저장을 클릭하여 변경을 완료합니다.

이제 웹사이트가 활성화될 수 있도록 코드의 out 디렉터리에 포함된 파일을 이 버킷에 업로드해야 합니다. 버킷의 버킷 세부정보 페이지로 이동하고 각 파일이나 폴더를 개별적으로 선택하여 이 작업을 수동으로 수행할 수 있습니다. 하지만 프로그래밍 방식으로 이를 수행하는 코드를 작성해 보겠습니다. IDE로 돌아가거나 코드를 업데이트하는 곳이면 어디든 프로젝트 루트에 upload.sh라는 새 파일을 생성해 보겠습니다. 다음 내용을 추가합니다.

 #!/bin/bash # ADD YOUR BUCKETNAME HERE (no quotes necessary) # For example: # BUCKETNAME=somerandombucket123 BUCKETNAME=somerandombucket123 echo "Removing out folder..." sleep 1; rm -rf out echo "Creating production build..." sleep 1; npm run build echo "Uploading assets to the cloud..." sleep 1; gsutil cp out/404.html gs://$BUCKETNAME gsutil cp out/favicon.ico gs://$BUCKETNAME gsutil cp out/index.html gs://$BUCKETNAME gsutil cp out/index.txt gs://$BUCKETNAME gsutil cp out/test.html gs://$BUCKETNAME gsutil cp out/test.txt gs://$BUCKETNAME gsutil cp -r out/_next gs://$BUCKETNAME

"somerandombucket123"을 버킷 이름으로 바꾸십시오. 여기서는 코드의 의미에 대해 너무 걱정하지 마세요. 본질적으로 우리가 하는 일은 다음과 같습니다.

1. 오래된 프로덕션 빌드 제거
2. 새로운 프로덕션 빌드 만들기
3. Google Cloud CLI를 사용하여 프로덕션 빌드의 콘텐츠를 버킷에 업로드합니다.

이 스크립트를 실행하려면 먼저 Google Cloud CLI를 다운로드해야 합니다. 여기의 지침을 따르세요. 설치 후에는 터미널에서 gcloud auth login을 실행해야 합니다. 그러면 Google Cloud CLI를 사용할 수 있는 액세스가 승인됩니다. 이에 대한 자세한 지침과 배경은 해당 문서 에서 찾을 수 있습니다. 성공적으로 승인되면 package.json에 새로운 실행 스크립트를 추가해 보겠습니다. 업로드 스크립트를 등록하려면 "scripts" 개체 내에 새 스크립트 항목을 추가하세요.

"upload": "sh upload.sh"

다음으로 테스트해 보겠습니다. 터미널을 다시 열고 "npm run upload"를 실행하세요. 그러면 스크립트가 실행되고 버킷에 발생하는 업로드에 대한 일부 출력이 표시됩니다. Google Cloud Storage 페이지로 돌아가서 버킷을 열면 방금 업로드한 파일이 표시됩니다. https://storage.googleapis.com/YOUR_BUCKET_NAME/index.html (여기서 YOUR_BUCKET_NAME은 버킷 이름)로 이동하면 사이트가 표시됩니다. 그러나 기본 Next.js 스타일이 사라지고 테스트 페이지 링크가 깨졌음을 알 수 있습니다. 이유가 무엇인가요?

브라우저 콘솔을 열면 리소스를 찾을 수 없다는 오류가 많이 표시되어야 합니다. 즉, 브라우저는 귀하의 사이트에 대해 로드하도록 지시된 파일을 찾을 수 없습니다. 자세히 살펴보면 리소스의 URL이 올바르지 않고 경로에 버킷 이름이 누락되어 있음을 알 수 있습니다. 사용자 지정 도메인을 사용하고 DNS를 올바르게 구성했다면 이 문제가 발생하지 않았을 것입니다. 하지만 이 게시물의 목적에 맞게 라우팅을 수정하기 위한 추가 코드를 추가해 보겠습니다. src/app/page.tsx(또는 page.jsx)를 열고 다음과 같이 파일을 업데이트합니다.

 import Link from "next/link"; import styles from "./page.module.css"; // Replace below with your bucketname. const BUCKET_NAME = "somerandombucket123"; const isProd = process.env.NODE_ENV === "production"; export default function Home() { return ( <main className={styles.main}> <div className={styles.description}> <p>Hello world!</p> <Link href={isProd ? '/BUCKET_NAME/test.html' : "/test"}> Test Page! </Link> </div> </main> ); }

"somerandombucket123"을 버킷 이름으로 바꾸십시오. 다음으로 next.config 파일을 다음과 같이 업데이트합니다.

 // Replace below with your bucketname. const BUCKET_NAME = "somerandombucket123"; const isProd = process.env.NODE_ENV === "production"; /** @type {import('next').NextConfig} */ const nextConfig = { assetPrefix: isProd ? 'https://storage.googleapis.com/BUCKET_NAME/' : undefined, output: "export", }; export default nextConfig;

이번에도 "somerandombucket123"을 버킷 이름으로 바꿔야 합니다. 위의 코드 조각에서는 노드 환경 변수가 프로덕션(Next.js에서 설정)일 때 버킷 이름을 설명하기 위해 추가 논리를 추가했음을 알 수 있습니다. 구성 파일에서 리소스를 찾을 수 없음 오류를 수정하기 위해 자산 접두사를 추가하고 경로 앞에 버킷 이름을 붙여 홈 페이지의 라우팅 오류를 설명합니다. 이제 코드를 업로드하고 작동하는지 확인해 보겠습니다. 다시 한 번 시작합니다: npm run upload. 웹사이트로 돌아가 페이지를 새로고침하세요. 우리는 어떻게 했나요? 사이트는 현재 로컬에 있는 내용을 반영해야 합니다. 프로세스 시작 시 도메인 이름과 일치하는 버킷을 생성하려는 경우 리소스 오류가 발생하지만 여전히 클라이언트 라우팅 문제가 발생합니다. 불행하게도 이 접근 방식의 한 가지 단점은 프로덕션 제공을 위해 경로에 .html 접미사를 추가하는 데 필요한 추가 코드입니다.

다음 단계 🙂

나중에 사용자 지정 도메인을 제공하기 위해 버킷에 필요한 DNS 레코드 및 구성 변경 사항을 추가하고 웹 사이트에 SSL을 구성하는 방법을 다루겠습니다. 오늘 뭔가를 배웠기를 바랍니다. 앞으로는 다음과 같은 몇 가지 아이디어에 대해 이야기하겠습니다.

• 페이지 리디렉션 및 SSL에 Cloudflare의 무료 계층 사용
• Google Analytics 구성 및 SEO 최적화

읽어주셔서 감사하고 응원합니다!