Ubuntu 18.04에서 GitLab CI/CD를 사용하여 Vue 애플리케이션 자동 배포 방법
선결 조건
Latest release of node 로컬 기기에 설치
로컬 컴퓨터에 Vue 설치
먼저
vue-cli을 설치합니다.이것은 새 Vue 응용 프로그램을 신속하게 구축할 수 있는 명령줄 도구입니다.다음 명령을 실행하여 로컬 컴퓨터에 vue-cli을 설치합니다.npm install -g @vue/cli
vue-cli을 실행하는 데 필요한 모든 의존 항목을 가져옵니다. 다음 명령을 실행하여 설치를 검증할 수 있습니다.vue
Vue 응용 프로그램 만들기
이 단계에서,
vue-clicreate 명령을 사용하여 새로운 프로그램을 만들 것입니다. 이 명령은 응용 프로그램과 필요한 플러그인을 구축하는 데 도움을 줄 것입니다.다음 작업을 실행하여 새 Vue 응용 프로그램을 만듭니다.vue create vue-demo
완료되면 디렉터리를
vue-demo에서 만든 vue-cli 폴더로 변경하고 다음을 실행합니다.npm run serve
그러면 Vue 애플리케이션이 포트 8080을 통해 로컬 호스트에서 액세스할 수 있습니다.http://localhost:8080에 방문하여 신청을 확인하십시오.
GitLab 설정
이제 Vue 애플리케이션을 GitLab 저장소로 전송합니다.GitLab’s Website으로 가서 계정에 로그인하십시오. 계정이 없으면 계정을 만드십시오.
다음에 새 프로젝트를 만듭니다.GitLab 대시보드의 오른쪽 위 모서리에
New project이라는 초록색 버튼이 표시됩니다.클릭하십시오.
항목의 이름을 지정해야 하는 새 화면이 나타납니다.프로젝트의 이름을
vue-demo으로 지정하면 프로젝트 설명을 비울 수 있습니다. 이것은 공공 저장소일 수도 있고 개인 저장소일 수도 있습니다.마지막 확인란을 선택 취소합니다.
vue-demo 애플리케이션을 원격 저장소에 로컬로 연결해야 합니다.이를 위해 터미널로 이동하여 응용 프로그램의 디렉터리에 있는지 확인하고 다음을 실행하십시오.git init
git remote add origin git@gitlab.com:<your-gitlab-username>/vue-demo.git
git add .
git commit -m "Initial commit"
git push -u origin master
NOTE : Replace
<your-gitlab-username>with your actual GitLab username.
이전에 GitLab 암호를 구성한 경우 GitLab 암호를 입력하거나 SSH를 통해 인증하라는 메시지가 표시됩니다.완료되면 Gitlab의
vue-demo 프로젝트 대시보드를 방문하여 모든 원본 파일이 있어야 합니다.
파이프 구성
이 단계에서는 Docker 및 GitLab CI를 사용하여 파이핑을 구성합니다.원하는 텍스트 편집기나 IDE를 사용하여 확장자 없이
Dockerfile이라는 새 파일을 만들고 다음 내용을 붙여넣습니다.FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
다음은
.gitlab-ci.yml을 만듭니다.그러면 GitLab에서 변경 사항을 서버에 배포할 수 있습니다.이 프로필은 서버와의 통신을 만듭니다.이것은 코드가 전송될 때마다 서버에서 실행해야 하는 조작과 명령을 포함한다.다음 내용을 .gitlab-ci.yml 파일에 복사하여 저장합니다.image: docker
services:
- docker:dind
stages:
- deploy
step-deploy-prod:
stage: deploy
script:
- docker build -t app/vue-demo .
- docker run -d -p 80:80 --rm --name todoapp app/vue-demo
git add .
git commit -m "Pipeline Configurations"
git push
서버 구성
이 단계에서 Ubuntu을 실행하는 서버가 필요합니다.DigitalOcean을 등록하고 Ubuntu 서버를 빠르게 구성할 수 있습니다.
서버에 SSH 연결
다음 명령을 실행하여 서버에 SSH를 연결합니다.
ssh username@<server-ip>
NOTE : SSH procedure may be different on windows
GitLab Runner 설치
GitLab Runner은 GitLab과 원격 서버 간의 인터페이스로 사용됩니다.다음 명령을 실행하여 GitLab Runner를 설치합니다.
curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.deb.sh | sudo bash
sudo apt-get install gitlab-runner
sudo gitlab-runner start
파이프 등록
파이프를 등록하려면 다음 명령을 실행합니다.
sudo gitlab-runner register
Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com/):
https://gitlab.com/을 입력하고 Enter을 누릅니다.다음 힌트는 다음과 같습니다.Please enter the gitlab-ci token for this runner:
vue-demo 프로젝트 계기판에서 영패를 얻을 수 있습니다. 방법은 왼쪽 네비게이터 부분의 Settings에 마우스를 걸고 다른 하위 메뉴에 일련의 옵션을 표시하고 CI / CD을 누르십시오.
다음은 runner 옵션의
Expand 단추를 누르십시오.
확장 옵션을 사용하면 영패를 보고 복사하여 서버 SSH 터미널로 돌아가서 붙여넣고
Enter 키를 누르십시오.
이 모든 과정을 건너뛰려면
https://gitlab.com/<username>/vue-demo/-/settings/ci_cd에 직접 액세스할 수 있습니다.NOTE:
<username>should be your gitlab username
다음은 다음과 같이 달리기 선수의 설명과 라벨을 입력해야 합니다.
Please enter the gitlab-ci description for this runner:
Please enter the gitlab-ci tags for this runner (comma separated):
Enter 키를 눌러 건너뛰십시오.다음 메시지가 표시됩니다.Please enter the executor: ssh, virtualbox, kubernetes, docker, docker-ssh, shell, docker+machine, docker-ssh+machine, custom, parallels:
shell을 입력하고 enter 키를 누르십시오.서버에 GitLab Runner를 등록했습니다.Docker 설치
다음 명령을 실행하여 docker를 빠르게 설치할 수 있습니다.
sudo snap install docker
sudo groupadd docker
sudo usermod -aG docker $USER
reboot
sudo usermod -aG docker gitlab-runner
GitLab Runner를 sudoers에 추가
GitLab Runner를 sudoers 목록에 추가하려면 다음을 실행하십시오.
sudo nano /etc/sudoers
gitlab-runner ALL=(ALL) NOPASSWD: ALL
정보 확인
정보를 확인하려면 다음을 실행하십시오.
sudo nano /etc/gitlab-runner/config.toml
...
[[runners]]
url = "https://gitlab.com/"
token = "XXXXXXXXX"
executor = "shell"
[runners.custom_build_dir]
[runners.ssh]
user = "<SERVER ACCOUNT USERNAME>"
host = "<SERVER IP ADDRESS>"
[runners.cache]
[runners.cache.s3]
[runners.cache.gcs]
...
user 및 host 속성 세부 정보가 서버와 일치하지 않으면 이 섹션에서 수정할 수 있습니다....
[runners.ssh]
user = "<SERVER ACCOUNT USERNAME>"
host = "<SERVER IP ADDRESS>"
...
sudo gitlab-runner restart
테스트 배포
이 단계에서, 프로그램이 서버에 배치될지 확인하기 위해 파이프를 실행할 것입니다.
프로젝트 GitLab 대시보드에서 파이핑 메뉴로 이동합니다.
Run Pipeline을 클릭합니다.
배포할 지점을 선택하십시오. 기본값은
master입니다.Run Pipeline을 클릭합니다.
응용 프로그램 배치가 시작됩니다.
step-deploy-.... 단추를 누르면 절차를 볼 수 있습니다.
배포가 완료되면
Job succeeded 메시지가 표시됩니다.만약 실패한다면 모든 절차를 검사하여 어떤 내용도 누락되지 않도록 하세요.브라우저의 서버 IP 주소를 방문하면 Vue 로그인 페이지를 볼 수 있습니다. 이것은 응용 프로그램이 성공적으로 배치되었음을 의미합니다.
응용 프로그램은
master 지점을 전송할 때마다 자동으로 자신을 구축하고 배치합니다.결론
이 강좌에서 Vue 프로젝트를 성공적으로 만들었고 Docker와 GitLab CI 구성을 작성했으며 Docker, GitLab Runner를 사용하여 서버를 구성하고 GitLab에 파이핑을 구성했습니다.이렇게 하면 당신은 장래에 다른 항목을 설정할 수 있습니다.
Vue 어플리케이션 체험, 사용자 작동 방식 이해
Vue 디버그js 응용 프로그램은 매우 어려울 수 있습니다. 특히 사용자 세션에 수십 개, 심지어 수백 개의 돌연변이가 있을 때.운영 중인 모든 사용자의 Vue 돌연변이 모니터링 및 추적에 관심이 있으시면 try LogRocket.으로 문의하십시오.
LogRocket은 웹 응용 프로그램에 사용되는 DVR과 같아서 Vue 응용 프로그램에서 발생하는 모든 것을 기록한다. 이는 네트워크 요청, 자바스크립트 오류, 성능 문제 등을 포함한다.문제가 발생한 원인을 추측하지 않고 응용 프로그램의 상태를 집합하여 보고할 수 있습니다.
LogRocket Vuex 플러그인은 Vuex 돌연변이를 LogRocket 컨트롤러에 기록하여 오류의 원인과 문제가 발생했을 때 응용 프로그램이 어떤 상태에 있는지 상하문을 제공합니다.
디버그 Vue 응용 프로그램 업데이트 방법 - Start monitoring for free.
게시물 How to auto deploy a Vue application using GitLab CI/CD on Ubuntu 18.04이 LogRocket Blog에 먼저 올라왔습니다.
Reference
이 문제에 관하여(Ubuntu 18.04에서 GitLab CI/CD를 사용하여 Vue 애플리케이션 자동 배포 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/bnevilleoneill/how-to-auto-deploy-a-vue-application-using-gitlab-ci-cd-on-ubuntu-18-04-4fad텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
