gitlab 프로젝트 CI/CD환경 구축하기 5편 -EC2 서버 내에서 프론트엔드 빌드하기-
1. gitlab 연동하기
이전에 window jenkins에서 했던대로 gitlab 연동을 수행한다
gitlab 프로젝트 CI/CD 환경 구축하기 2편 -window에서 jenkins와 gitlab 프로젝트 연동하기 연습- (tistory.com)
gitlab 프로젝트 CI/CD 환경 구축하기 2편 -window에서 jenkins와 gitlab 프로젝트 연동하기 연습-
1. plugin 설치 다음 링크에 나온대로 plugin을 모두 설치해줌 [CI CD] Jenkins와 Gitlab 연동 및 CI/CD 구축하기 (tistory.com) [CI CD] Jenkins와 Gitlab 연동 및 CI/CD 구축하기 1. Jenkins 플러그인 설치 우선, Jenkins와 Git
deepdata.tistory.com
먼저 plugin 설치
1. Bitbucket Pipeline for Blue Ocean
2. Dashboard for Blue Ocean
3. Personalization for Blue Ocean
4. Display URL for Blue Ocean
5. Server Sent Events (SSE) Gateway
6. Events API for Blue Ocean
7. Blue Ocean Pipeline Editor
8. i18n for Blue Ocean
9. Autofavorite for Blue Ocean
10. Blue Ocean
11. NodeJS
12. GitLab
13. Generic Webhook Trigger
14. Gitlab Authentication
15. Gitlab API
16. GitLab Branch Source
17. Gitlab Merge Request Builder
18. Config File Provider
19. Docker
20. Docker Pipeline
21. docker-build-step
시스템 설정 들어가서 Gitlab connection 수행
실제 배포를 수행해야하니 혹시 모르니 gitlab token은 어디다 적어두자
프로젝트 하나 생성해봐서 실제로 코드 연동이 잘 되는지 확인해보자
repo url 설정시 이런 에러가 나는 경우, EC2 서버에 git이 설치 안되어 있을 가능성이 높다
[AWS EC2] git 설치 및 연동하기 :: 외계공룡 작업공방 (tistory.com)
[AWS EC2] git 설치 및 연동하기
먼저 다음과 같은 명령어로 현재 우분투 관리하고있는 소프트웨어들을 최신버전으로 업데이트 시켜줍니다. $ sudo apt-get update 업데이트가 끝나면 다음과 같은 명령어로 깃을 설치해줍니다. $ sudo
chucoding.tistory.com
먼저 설치된 소프트웨어 최신으로 업데이트
$ sudo apt-get update
다음 명령어로 git 설치
$ sudo apt-get install git
버전 확인해서 잘 설치되어있는지 확인
$ git --version
입력했을때 그래도 에러가 날 수 있는데 credentials 설정을 해주면 해결될 수도 있다
https://be-developer.tistory.com/14
[Jenkins] github private repository 연동하기 / Credentials 오류 날 때
[Jenkins] github private repository 연동하기 / Credentials 오류날 때 Jenkins와 github 연동하는 방법을 따라가던 중 private repository 연동하기에 자꾸 실패했다. 아무래도 Credentials 생성이 잘못되었던것 같았다.
be-developer.tistory.com
username password로 설정하고
username, password,id, description 적으라는데.. 이게 아무거나 적어도 되는줄 알았는데
username은 gitlab id
그리고 password를 gitlab access token으로 설정하자.. 이러니까 에러가 없어졌다
이제 아래 branches to build를 /main으로 고치고 빌드해서 코드 연동이 되는지 확인해준다
2. nodejs 설정
EC2 서버에 nodejs 설치한다
$ sudo apt-get update
$ sudo apt-get install -y build-essential
$ sudo apt-get install curl
// 원하는 버전 적으면 됨 16.x
$ curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash --
$ sudo apt-get install -y nodejs
설치가 잘 되었는지 node -v와 npm -v를 입력해서 node 버전 npm 버전을 확인
global tool configuration으로 들어가서 nodejs 설정을 해준다
gitlab 프로젝트 CI/CD환경 구축하기 3편 -window에서 node.js & react 프로젝트 빌드해보기- (tistory.com)
gitlab 프로젝트 CI/CD환경 구축하기 3편 -window에서 node.js & react 프로젝트 빌드해보기-
1. nodejs 플러그인 설치 확인 dashboard 누르고 jenkins 관리에 들어가서 플러그인 관리로 들어간다. installed plugins에서 nodejs 검색해서 nodejs plugin이 설치되어있는지 확인 없다면 available plugins에서 설치
deepdata.tistory.com
상관없는것 같기는 한데 웬만하면 자기가 설치한 nodejs 버전을 선택하는게 좋을듯
3. react 빌드 테스트
nodejs를 이용해서 실제 react 프로젝트가 빌드되는지 테스트해보자
빌드 환경에 add timestamps to the console output, provide node & npm bin/folder to path 설정하고
앞에서 설정한 nodejs 사용
build step에서 execute shell을 누르고
저장하고 빌드 수행해본다.
그러면 빌드를 실패했는데...
아니 윈도우에서는 빌드가 제대로 돌아가는데... 우분투에서는 빌드가 안되니까 미쳐버리는줄
4. EC2에서 git clone하기
젠킨스가 내 우분투 서버에서 git을 clone하고 npm install한 다음에 빌드하는거나 마찬가지니까
한번 내가 인간 젠킨스가 되어서 실제로 git을 가지고와서 빌드해보자
먼저 다음 명령어는 현재 경로에 존재하는 모든 파일 목록을 보여준다
$ ll
mkdir을 이용해서 git clone할 폴더를 넣어줄 폴더를 만든다
$ mkdir pjt1
cd pjt1으로 폴더내로 이동하고, git clone <clone with HTTPS repo주소>를 이용해 clone
그러면 username, password 입력하라고 나온다. 입력하면 git clone을 수행해온다
프로젝트 폴더 내로 이동하고, frontend로 이동하고 npm install, npm run build를 수행해본다
아하 내 우분투 서버에서도 build가 안되는구나... 그러면 젠킨스에서 될리가 없지
우연히 그냥 한번 npm start로 실행을 해봤다
start 조차도 안되는거였네..?
그리고 login과 signup 부분에서 문제가 생긴다는 것도 알려주고 있다.
그러면 여기서부터 시작해야겠다
여러가지 시도와 고난과 역경과... 시간을 쏟아부었을때 결론을 내렸다..
우분투와 윈도우 환경이 다르니 경로에 차이가 생겨 빌드에 문제가 있는것 같다
생각해보면 crypto-browserify가 문제가 있다고 나오는데..
이걸 안쓰는 방법이 없나?
node.js - NodeJS crypto module not working in browser after bundling with webpack - Stack Overflow
NodeJS crypto module not working in browser after bundling with webpack
I keep getting the following error when I view my code in the browser: Uncaught TypeError: crypto.createHash is not a function I've tried loading the module during runtime using webpack: module.e...
stackoverflow.com
애초에 crypto가 node.js 내장 모듈이고 core library에 있는 모듈은 node.js 환경에서만 수행할 수 있지, browser에는 수행할 수 없다고함
그럼에도 불구하고 browser에서 수행할려면 crypto-browserify 등을 설치해야 동작했었음
여기서 든 생각이..
crypto를 frontend에 써야하나?
비밀번호 암호화를 프론트엔드에서 수행하고 백엔드로 넘겨야하나?
여러 수소문한 결과로... 프론트엔드에서 암호화하는건 아무 의미가 없다는걸 배웠다..
암호화에 대해서 지금은 늦었으니 나중에 공부해보기로 하고
로그인할 때 패스워드를 해싱해서 보내는 것은 보안에 아무런 도움이 안됩니다 | Jang's Blog (palindrom615.dev)
로그인할 때 패스워드를 해싱해서 보내는 것은 보안에 아무런 도움이 안됩니다
…
www.palindrom615.dev
프론트엔드에서 회원정보 백엔드로 넘길때는 그냥 넘겨주고 백엔드에서 crypto를 사용해서 암호화 한다음에 DB에 저장하자
이렇게 로직을 바꾸면 crypto-browserify 관련 모듈을 사용할 필요도 없으니 frontend에서 다 지워버린다
그렇게 바꾸니.. EC2 jenkins에서 성공적으로 빌드 가능
참고
다음 명령어는 해당 폴더 내에 파일이 존재하더라도 강제로 삭제 가능
$ rm -rf <폴더명>