Netlify 및 GitHub 작업이 있는 CI/CD 파이핑
☑️ 개발 및 프로덕션 환경(웹 사이트)
☑️ CI/CD용 GitHub 작업(Netlify 구축 시간 절약)
☑️ Netlify는 무료, 안전한 관리 서비스를 제공합니다.
☑️ 종합적인 테스트를 위한 Cypress
CI stands for Continous Integration, which means that developers are continuously integrating their changes into the main branch.
CD stands for Continous Development or Delivery, which means that changes are automatically pushed to customers barring a failed test.
프로젝트 설정
npx create-react-app netlify-github-pipelinegit pullgit checkout mainNetlify 설정
NETLIFY_AUTH_TOKENNETLIFY_AUTH_TOKENNETLIFY_SITE_IDNETLIFY_SIDE_ID를 DEV_NETLIFY_SITE_ID로 변경한다.만약 우리가 Netlify를 사용하여 구축하고 배치한다면, GitHub repo와 직접 연결할 것입니다.우리는 또한 그들의 build preview feature를 사용할 것이지'단독'개발 사이트를 만드는 것이 아니다.
Using Netlify is cleaner, but they limit their free build minutes to 300/month. GitHub Actions has 3000 for private repos and is unlimited for public repos.
GitHub 워크플로우 설정
If you're not familiar with GitHub Actions, I would suggest checking out their docs. I don't go into a bunch of detail on how the workflow files work.
우리는 생산과 개발 환경을 창조할 것이다.이러한 환경을 반영하려면 두 개의 분기와 Netlify 사이트 ID를 설정해야 합니다.우리는 또한 당김 요청을 만들 때마다 테스트를 실행하기를 희망합니다.그래서 우리는 생산, 개발과 테스트 세 가지 업무 절차가 필요하다.
If you're not familiar with GitHub Actions, I would suggest checking out their docs. I don't go into a bunch of detail on how the workflow files work.
mkdir .github/workflows개발 워크플로우
development.yml 파일:# Name of workflow
name: Development workflow
# When workflow is triggered
on:
pull_request:
branches:
- dev
# Jobs to carry out
jobs:
deploy:
# Operating system to run job on
runs-on: ubuntu-latest
# Steps in job
steps:
# Get code from repo
- name: Checkout code
uses: actions/checkout@v1
# Install NodeJS
- name: Use Node.js 12.x
uses: actions/setup-node@v1
with:
node-version: 12.x
# Run npm install and build on our code
- run: npm install
- run: npm run build --if-present
# Deploy to Netlify using our dev secrets
- name: Deploy to netlify
uses: netlify/actions/cli@master
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.DEV_NETLIFY_SITE_ID }}
with:
args: deploy --dir=build --prod
secrets: '["DEV_NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]'
생산 공정
production.yml 파일:# Name of workflow
name: Production workflow
# When workflow is triggered
on:
push:
tags:
- "v*"
# Jobs to carry out
jobs:
deploy:
# Operating system to run job on
runs-on: ubuntu-latest
# Steps in job
steps:
# Get code from repo
- name: Checkout code
uses: actions/checkout@v1
# Install NodeJS
- name: Use Node.js 12.x
uses: actions/setup-node@v1
with:
node-version: 12.x
# Run npm install and build on our code
- run: npm install
- run: npm run build --if-present
# Deploy to Netlify using our production secrets
- name: Deploy to netlify
uses: netlify/actions/cli@master
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
with:
args: deploy --dir=build --prod
secrets: '["NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]'
You can create releases using the GitHub website or by create a tag,
git tag v1.0then pushing the tag,git push origin v1.0
이 파일은 Ubuntu에서 Node를 실행하여 Google 프로그램을 구축한 다음 Google Netlify 생산 사이트에 이 프로그램을 배치합니다.지금 저희가 테스트를 설정해야 돼요!
테스트 워크플로우
Cypress에서 간단한 테스트를 실행하고 프로그램에 접근해서 실행 여부를 확인하는 설정이 필요합니다.This blog post Cypress 및 React에 대한 추가 정보가 있습니다.
cypress.json 파일{
"baseUrl": "http://localhost:3000"
}
cypressintegration 디렉터리 만들기init.spec.js 파일describe('Cypress', () => {
it('is working', () => {
expect(true).to.equal(true);
});
it('visits the app', () => {
cy.visit('/');
});
});
npm install cypresstest.yml 파일# Name of workflow
name: Test workflow
# Trigger workflow on all pull requests
on:
pull_request:
branches:
- dev
- main
# Jobs to carry out
jobs:
test:
# Operating system to run job on
runs-on: ubuntu-latest
# Steps in job
steps:
# Get code from repo
- name: Checkout code
uses: actions/checkout@v1
# Install NodeJS
- name: Use Node.js 12.x
uses: actions/setup-node@v1
with:
node-version: 12.x
# Build the app using cypress
- name: Cypress run
uses: cypress-io/github-action@v1
with:
build: npm run build
start: npm start
wait-on: http://localhost:3000
browser: chrome
이 모든 것을 함께 놓아라
현재 세 개의 작업 흐름 파일,cypress 디렉터리와 json 파일, 두 개의 지점과 Netlify 사이트가 있어야 합니다.너는 계속해서 모든 변경 사항을main으로 미룰 수 있다.다음에 나는 개발 예시를 통해 새로운 파이프를 보여줄 것이다.
파이핑 예
만약 우리가 아주 멋진 기능을 추가하고 싶다면.이 멋진 기능은react 프로그램을 만드는 기본 텍스트를 바꾸고 있습니다.
우리는main이나 dev에서 변경하지 말고, dev에서'feature/change text '라는 기능 지점을 만들어야 합니다그리고 변경 사항을 dev에 통합할 것입니다. dev 사이트에서 변경 사항을 보고main에 통합할 수 있습니다.그리고 우리는 모든 사용자를 위해 새로운 버전을 만들 수 있습니다.
새로운 CI/CD 파이프라인을 사용하면 이 모든 것을 쉽게 할 수 있습니다.
src/App.js의 p 태그 텍스트git checkout main; git pull.git tag v1.0.git push origin v1.0결론
많이 봤어요.CI/CD 파이프를 정의하고 동시에 구현하려고 합니다.
전체적인 사고방식은 GitHub에 두 개의 지점이 있는데 그것이 두 사이트와 일치하고 하나는 사용자에게 사용되고 다른 하나는 개발에 사용된다는 것이다.우리의 변경 사항은 매번 당김 요청에서 테스트를 진행할 것입니다.사용자에게 우리의 개발 변경 사항을 홍보하기 위해서 우리는 버전을 만들었다.
이것은 지나치게 간소화된 작업 절차다.회사는 통상적으로 생산과 개발의 기초 위에서 단계와 테스트 환경을 구축한다.GitHub 작업에 대한 기본 지식을 이미 알고 있으므로 이러한 작업을 추가하는 것은 매우 쉽습니다.
감사:
표지 사진 작성자Samuel Sianipar가 Unsplash
Reference
이 문제에 관하여(Netlify 및 GitHub 작업이 있는 CI/CD 파이핑), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dancurtis/ci-cd-pipeline-with-netlify-and-github-actions-bcm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
