나는 어떻게 매달 약 1달러의 비용으로 나의 개인 사이트를 위탁 관리합니까
8940 단어 reactcodenewbieawstutorial
키스하다
우리가 세부 사항을 깊이 있게 토론하기 전에, 나는 이렇게 저렴한 가격으로 사이트 배후에 배치할 수 있는 구동 원리를 상세하게 소개하고 싶다.이것이 바로 KISS Principal이다.키스는'간단함, 어리석음'또는'어리석음 간단함'을 대표한다. 이것은 누구에게 물어보느냐에 달려 있다.놀랍게도 이 말은 미국 해군에서 유래한 것이지만 어떤 복잡한 임무에도 적용된다.그것은 소프트웨어를 개발할 때 특히 적용된다.응용 프로그램을 개발하고 배치하는 수백만 개의 방법은 시작할 때 압도적일 수 있다.서로 다른 프레임워크, 서버 측 렌더링과 클라이언트 렌더링, 서로 다른 위탁 관리 플랫폼이 있다.네가 가진 선택은 무궁무진한 것 같다.하루가 끝날 때, 프로젝트에 대한 목표가 무엇인지 성실하게 검사하고, 가능한 한 작은 도구를 찾아서 목표를 달성하면 창조자와 소비자에게 가장 좋은 결과를 가져다 줄 수 있다.
프로젝트 구조
우선, 프로젝트가 어떻게 구축되었는지 1마일 높이에서 알아보자.우선, 내 응용 프로그램의 핵심은 React이다.그러나 일반적인 낡은 HTML, CSS, JS로 쉽게 할 수 있다.다음은 AWS의 내용을 살펴보겠습니다.만약 당신이 익숙하지 않다면, 아마존 인터넷 서비스는 아마존이 구축하고 유지하는 클라우드 컴퓨팅 플랫폼이다.그것은 매우 광범위한 서비스를 가지고 있지만, 오늘 우리는 두 가지를 중점적으로 소개할 것이다.S3 or Amazon's Simple Storage Service는 데이터 저장 서비스의 일종이다.이 기능은 AWS의 주요 기능으로 정적 파일을 저장하여 다른 사람이 액세스할 수 있도록 합니다.그 다음Cloudfront은 아마존의 콘텐츠 납품 네트워크다.CDN의 목적은 지리적 위치에 관계없이 소비자의 가용성을 극대화하는 것이다.따라서 우리의 사이트가 특정 지역에 위치하더라도 우리는 모든 사람이 우리의 제품을 방문할 때 일치된 체험을 할 수 있도록 확보할 수 있다.
Continuous Integration(동급 연속 배치)는 응용 프로그램의 생산 버전을 납품하는 과정을 자동화하는 행위이다.CircleCI는 공공 목표에 응용 프로그램을 배치하기 위해 통합된 제품이다.우리는 그것을 사용하여 우리의 프로젝트를 AWS에 연결할 것이다.
입문
프로젝트
우리 뛰어들자.
$: npm i -g create-react-app
$: create-react-app demo
이것은 React 보일러판 프로젝트를 만들 것입니다. 우리는 그것을 사용하여 배치 과정을 설정할 수 있습니다.다음으로, 우리가 앞으로 더 긴 과정에 실패하지 않도록 현지에서 프로젝트를 구축합시다.
$: npm run build
성공적으로 완료되면 저장소를 추가합니다.Github의 초보자라면 등록here하고 this guide을 따라 저장소를 만드는 방법을 알아볼 수 있습니다.저장소를 만들면 로컬 repo를 Github에서 만든 원격 repo와 함께 작업하도록 설정할 수 있습니다.그리고 우리의 첫 번째 제출을 추가합니다.Git 또는 Git CLI에 익숙하지 않다면 간단한 강좌 시리즈가 있습니다.
아이템 더 이상 사용 불가
$: git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git
$: git add .
$: git commit -m "Inital Commit"
$: git push -u origin master
미국 용접 학회
S3
이제 AWS 아키텍처를 설정한 다음 프로젝트 자체를 더 처리해야 합니다.아직 AWS 계정이 없는 경우 설명서here를 따릅니다.완료되면 콘솔에 들어가서 "S3"을 검색합니다.
S3 대시보드에서 테이블에 있는 계정 스토리지 통을 볼 수 있습니다.오른쪽 상단에서 일련의 단추를 볼 수 있습니다.맨 오른쪽에 있는 Bucket 만들기를 선택합니다.
S3 Bucket을 만드는 데 사용할 양식이 표시됩니다.S3의 bucket은 파일 구조의 최상위 디렉토리와 유사합니다.그것들의 구성 방식은 그 중의 대상의 행동을 결정한다.간단하게 말하면 데이터를 저장하고 데이터 접근 방식을 설정하는 위치입니다.여기에서 프로젝트와 연관되기 쉬운 이름을 입력하고 "모든 공공 접근 차단"단추의 선택을 취소해야 합니다.이것은 이 설정을 선택하면 저장소에 넣은 모든 데이터에 누구나 접근할 수 있기 때문에 위험하다는 것을 경고합니다.우리의 용례에 대해 이것은 필수적이다.우리는 모든 사람을 위해 방문할 수 있는 사이트를 제공할 것이다.bucket을 만든 후 테이블에서 선택하고 "Properties"옵션을 선택하십시오.
여기서 Bucket을 웹 호스트로 구성해야 합니다.첫 번째 줄 단추에서'정적 사이트 관리'를 선택하십시오.여기서 인덱스 및 오류 HTML 파일 이름을 입력합니다.이게 바로 S3!!구조 설정이 절반이 끝나면 Cloudfront로 전환합시다.
운봉
AWS 콘솔로 돌아가서 "S3"대신 "Cloudfront"를 검색하면 Cloudfront로 리디렉션됩니다.CloudFront 대시보드에서 배포 작성을 선택합니다.거기서 너는 두 개의 단추로 맞이할 것이다.하나는 제목이 웹 섹션 아래에 있고 다른 하나는 RTMP 아래에 있습니다.웹 아래의 버튼을 선택합니다.너는 복잡한 발음 옵션이 많은 긴 표를 받을 수 있을 것이다.다행히도, 우리가 유일하게 해야 할 일은 버킷의 사이트 URL을'원본 도메인 이름'필드에 삽입하는 것이다.그런 다음 모든 내용을 기본값으로 유지하고 페이지 오른쪽 아래에 있는 "배포 만들기"를 선택할 수 있습니다.축하합니다!!이것이 모든 무서운 일이다.마지막으로 앞에서 만든 프로젝트와 우리가 설정한 구조를 연결합시다.
CircleCI회사
우선, CircleCI 계정here을 만들고 github 계정과 연결해야 합니다.그리고create-react-app 프로젝트로 돌아가서'.circleci'라는 루트 디렉터리를 추가합니다."config.yml"이라는 파일을 만듭니다.아래 내용을 파일에 붙여넣고 이전에 만든 BUCKET 이름으로 BUCKET\u NAME을 바꿉니다.
version: 2.1
orbs:
node: circleci/[email protected]
aws-s3: circleci/[email protected]
jobs:
build-and-test:
executor:
name: node/default
working_directory: ~/repo
steps:
- checkout
- node/with-cache:
steps:
- run: npm install
- run: npm test
- run: npm run build
- aws-s3/sync:
from: build
to: 's3://YOUR_BUCKET'
overwrite: true
arguments: |
--acl public-read \
--cache-control "max-age=86400"
workflows:
build-and-test:
jobs:
- build-and-test:
filters:
branches:
only: master
또 하나 주의해야 할 것은 맨 밑에 있는 필터 대상이다.이것은 그들이 주요 지점에 제출할 때마다 나는 사이트를 구축하고 배치하고 싶다는 것을 의미한다.이 파일을 원격으로 전송하면 마스터에게 직접 제출하지 마십시오. 그렇지 않으면 제출할 때마다 배치를 촉발합니다!이것은 당신의 AWS 계정에 추가 비용을 가져다 줄 뿐만 아니라, 사용자에게 나쁜 경험을 가져다 줄 수도 있다.
CircleCI 대시보드에서 사이드바에서 항목 탭을 선택합니다.Github 계정의 모든 저장소 목록이 표시됩니다.각 저장소 오른쪽에 항목 설정 버튼이 표시됩니다.createreact app 프로젝트를 포함하는 저장소의 단추를 선택하십시오.안에서 예시 노드 설정이 있는 텍스트 편집기를 볼 수 있습니다.위에서 너는 이 리본을 볼 수 있을 것이다.
수동 추가를 선택합니다.지금 CircleCI가 실행 중일 것입니다. 몇 분 안에 첫 번째 배포를 할 수 있을 것입니다!!
결론
당신은 지금 이미 AWS에서 당신의 사이트를 위탁 관리하고 있습니다!!어땠어요?처음에는 AWS가 감당하기 어려울 수도 있다는 것을 알지만, 대부분의 일처럼 그 위에 시간을 들이면 일을 완성하는 것이 제2의 천성이 된다.사용자 정의 영역을 설정하는 방법에 대해 알고 싶다면, 이 안내서를 따를 때 문제가 있거나, 일반적인 문제가 있다면, 아래에 댓글을 올리거나 트위터에 연락하세요.
| 에서 나를 찾다
저를 협찬해 주세요Github
이 문장을 좋아합니까?Buy me a coffee!
Reference
이 문제에 관하여(나는 어떻게 매달 약 1달러의 비용으로 나의 개인 사이트를 위탁 관리합니까), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/therealdakotal/how-i-host-my-personal-site-for-1usd-month-2c67
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
우선, 프로젝트가 어떻게 구축되었는지 1마일 높이에서 알아보자.우선, 내 응용 프로그램의 핵심은 React이다.그러나 일반적인 낡은 HTML, CSS, JS로 쉽게 할 수 있다.다음은 AWS의 내용을 살펴보겠습니다.만약 당신이 익숙하지 않다면, 아마존 인터넷 서비스는 아마존이 구축하고 유지하는 클라우드 컴퓨팅 플랫폼이다.그것은 매우 광범위한 서비스를 가지고 있지만, 오늘 우리는 두 가지를 중점적으로 소개할 것이다.S3 or Amazon's Simple Storage Service는 데이터 저장 서비스의 일종이다.이 기능은 AWS의 주요 기능으로 정적 파일을 저장하여 다른 사람이 액세스할 수 있도록 합니다.그 다음Cloudfront은 아마존의 콘텐츠 납품 네트워크다.CDN의 목적은 지리적 위치에 관계없이 소비자의 가용성을 극대화하는 것이다.따라서 우리의 사이트가 특정 지역에 위치하더라도 우리는 모든 사람이 우리의 제품을 방문할 때 일치된 체험을 할 수 있도록 확보할 수 있다.
Continuous Integration(동급 연속 배치)는 응용 프로그램의 생산 버전을 납품하는 과정을 자동화하는 행위이다.CircleCI는 공공 목표에 응용 프로그램을 배치하기 위해 통합된 제품이다.우리는 그것을 사용하여 우리의 프로젝트를 AWS에 연결할 것이다.
입문
프로젝트
우리 뛰어들자.
$: npm i -g create-react-app
$: create-react-app demo
이것은 React 보일러판 프로젝트를 만들 것입니다. 우리는 그것을 사용하여 배치 과정을 설정할 수 있습니다.다음으로, 우리가 앞으로 더 긴 과정에 실패하지 않도록 현지에서 프로젝트를 구축합시다.
$: npm run build
성공적으로 완료되면 저장소를 추가합니다.Github의 초보자라면 등록here하고 this guide을 따라 저장소를 만드는 방법을 알아볼 수 있습니다.저장소를 만들면 로컬 repo를 Github에서 만든 원격 repo와 함께 작업하도록 설정할 수 있습니다.그리고 우리의 첫 번째 제출을 추가합니다.Git 또는 Git CLI에 익숙하지 않다면 간단한 강좌 시리즈가 있습니다.
아이템 더 이상 사용 불가
$: git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git
$: git add .
$: git commit -m "Inital Commit"
$: git push -u origin master
미국 용접 학회
S3
이제 AWS 아키텍처를 설정한 다음 프로젝트 자체를 더 처리해야 합니다.아직 AWS 계정이 없는 경우 설명서here를 따릅니다.완료되면 콘솔에 들어가서 "S3"을 검색합니다. S3 대시보드에서 테이블에 있는 계정 스토리지 통을 볼 수 있습니다.오른쪽 상단에서 일련의 단추를 볼 수 있습니다.맨 오른쪽에 있는 Bucket 만들기를 선택합니다.
S3 Bucket을 만드는 데 사용할 양식이 표시됩니다.S3의 bucket은 파일 구조의 최상위 디렉토리와 유사합니다.그것들의 구성 방식은 그 중의 대상의 행동을 결정한다.간단하게 말하면 데이터를 저장하고 데이터 접근 방식을 설정하는 위치입니다.여기에서 프로젝트와 연관되기 쉬운 이름을 입력하고 "모든 공공 접근 차단"단추의 선택을 취소해야 합니다.이것은 이 설정을 선택하면 저장소에 넣은 모든 데이터에 누구나 접근할 수 있기 때문에 위험하다는 것을 경고합니다.우리의 용례에 대해 이것은 필수적이다.우리는 모든 사람을 위해 방문할 수 있는 사이트를 제공할 것이다.bucket을 만든 후 테이블에서 선택하고 "Properties"옵션을 선택하십시오.
여기서 Bucket을 웹 호스트로 구성해야 합니다.첫 번째 줄 단추에서'정적 사이트 관리'를 선택하십시오.여기서 인덱스 및 오류 HTML 파일 이름을 입력합니다.이게 바로 S3!!구조 설정이 절반이 끝나면 Cloudfront로 전환합시다.
운봉
AWS 콘솔로 돌아가서 "S3"대신 "Cloudfront"를 검색하면 Cloudfront로 리디렉션됩니다.CloudFront 대시보드에서 배포 작성을 선택합니다.거기서 너는 두 개의 단추로 맞이할 것이다.하나는 제목이 웹 섹션 아래에 있고 다른 하나는 RTMP 아래에 있습니다.웹 아래의 버튼을 선택합니다.너는 복잡한 발음 옵션이 많은 긴 표를 받을 수 있을 것이다.다행히도, 우리가 유일하게 해야 할 일은 버킷의 사이트 URL을'원본 도메인 이름'필드에 삽입하는 것이다.그런 다음 모든 내용을 기본값으로 유지하고 페이지 오른쪽 아래에 있는 "배포 만들기"를 선택할 수 있습니다.축하합니다!!이것이 모든 무서운 일이다.마지막으로 앞에서 만든 프로젝트와 우리가 설정한 구조를 연결합시다.
CircleCI회사
우선, CircleCI 계정here을 만들고 github 계정과 연결해야 합니다.그리고create-react-app 프로젝트로 돌아가서'.circleci'라는 루트 디렉터리를 추가합니다."config.yml"이라는 파일을 만듭니다.아래 내용을 파일에 붙여넣고 이전에 만든 BUCKET 이름으로 BUCKET\u NAME을 바꿉니다.
version: 2.1
orbs:
node: circleci/[email protected]
aws-s3: circleci/[email protected]
jobs:
build-and-test:
executor:
name: node/default
working_directory: ~/repo
steps:
- checkout
- node/with-cache:
steps:
- run: npm install
- run: npm test
- run: npm run build
- aws-s3/sync:
from: build
to: 's3://YOUR_BUCKET'
overwrite: true
arguments: |
--acl public-read \
--cache-control "max-age=86400"
workflows:
build-and-test:
jobs:
- build-and-test:
filters:
branches:
only: master
또 하나 주의해야 할 것은 맨 밑에 있는 필터 대상이다.이것은 그들이 주요 지점에 제출할 때마다 나는 사이트를 구축하고 배치하고 싶다는 것을 의미한다.이 파일을 원격으로 전송하면 마스터에게 직접 제출하지 마십시오. 그렇지 않으면 제출할 때마다 배치를 촉발합니다!이것은 당신의 AWS 계정에 추가 비용을 가져다 줄 뿐만 아니라, 사용자에게 나쁜 경험을 가져다 줄 수도 있다.
CircleCI 대시보드에서 사이드바에서 항목 탭을 선택합니다.Github 계정의 모든 저장소 목록이 표시됩니다.각 저장소 오른쪽에 항목 설정 버튼이 표시됩니다.createreact app 프로젝트를 포함하는 저장소의 단추를 선택하십시오.안에서 예시 노드 설정이 있는 텍스트 편집기를 볼 수 있습니다.위에서 너는 이 리본을 볼 수 있을 것이다. 수동 추가를 선택합니다.지금 CircleCI가 실행 중일 것입니다. 몇 분 안에 첫 번째 배포를 할 수 있을 것입니다!!
결론
당신은 지금 이미 AWS에서 당신의 사이트를 위탁 관리하고 있습니다!!어땠어요?처음에는 AWS가 감당하기 어려울 수도 있다는 것을 알지만, 대부분의 일처럼 그 위에 시간을 들이면 일을 완성하는 것이 제2의 천성이 된다.사용자 정의 영역을 설정하는 방법에 대해 알고 싶다면, 이 안내서를 따를 때 문제가 있거나, 일반적인 문제가 있다면, 아래에 댓글을 올리거나 트위터에 연락하세요.
| 에서 나를 찾다
저를 협찬해 주세요Github
이 문장을 좋아합니까?Buy me a coffee!
Reference
이 문제에 관하여(나는 어떻게 매달 약 1달러의 비용으로 나의 개인 사이트를 위탁 관리합니까), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/therealdakotal/how-i-host-my-personal-site-for-1usd-month-2c67
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$: npm i -g create-react-app
$: create-react-app demo
$: npm run build
$: git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git
$: git add .
$: git commit -m "Inital Commit"
$: git push -u origin master
version: 2.1
orbs:
node: circleci/[email protected]
aws-s3: circleci/[email protected]
jobs:
build-and-test:
executor:
name: node/default
working_directory: ~/repo
steps:
- checkout
- node/with-cache:
steps:
- run: npm install
- run: npm test
- run: npm run build
- aws-s3/sync:
from: build
to: 's3://YOUR_BUCKET'
overwrite: true
arguments: |
--acl public-read \
--cache-control "max-age=86400"
workflows:
build-and-test:
jobs:
- build-and-test:
filters:
branches:
only: master
Reference
이 문제에 관하여(나는 어떻게 매달 약 1달러의 비용으로 나의 개인 사이트를 위탁 관리합니까), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/therealdakotal/how-i-host-my-personal-site-for-1usd-month-2c67텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
