devops 2일차

실습1
AWS EC2에서 컨테이너 환경으로 배포를 해보자.

1. EC2에서는 도커 컴포즈 파일만 실행하면 되도록해야한다.

실습2
자동 배포 환경을 만들어보자.
아래 링크는 강사남의 완성 코드가 있는 깃허브
https://github.com/ddarahakit2023/frontend

frontend 배포 방법

1. EC2에 node.js를 설치한다.

2. 깃허브의 최신코드를 가져온다. git clone 후 파일 위치 주의

3. 최신 코드를 build한다. npm i npm run build

   현재 프로젝트에서는 build 시 이미지도 같이 생긴다.

4. 이미지를 만들어서 도커허브에 올린다. (docker login 필요)

   도커 로그인을 대화형으로 안하는 방법

docker login -u [username] -p [password]

5. 도커 컴포즈 파일을 실행한다.

docker-compose -f /home/ubuntu/web.yml pull # 최신 이미지를 가져온다.
docker-compose -f /home/ubuntu/web.yml up --force-recreate # 컨테이너를 다시 만든다.

이 명령어들을 ansible 또는 github action에서 실행할 수 있도록 yml파일을 만든다.

백엔드
1. 깃허브의 최신코드를 가져온다.
git clone
2. 최신 코드를 build해서 이미지 파일을 만든다.
3. 이미지를 도커 허브에 올린다.
4. EC2는 최신 버전을 가져와 컨테이너를 다시 실행한다.

test 코드 짜보기
Vue 셀리니움이라는 테스트 도구를 활용한다.

프론트엔드 프로젝트에서
npm i selenium-webdriver

test.js file 생성

const {Builder} = require('selenium-webdriver');
(async function example() {
    let driver = await new Builder().forBrowser('chrome').build();
    await driver.get('https://www.naver.com');
})();

node test.js 실행하면 네이버가 나온다.

ex 1 ) 로그인 테스트

const {Builder ,By} = require('selenium-webdriver');

(async function example() {

let driver = await new Builder().forBrowser('chrome').build();
await driver.get('https://www.naver.com');

const input_id = await driver.findElement(By.id('id'));
const input_pw = await driver.findElement(By.id('pw'));
const login_btn = await driver.findElement(By.id('log.login'));
input_id.sendKeys('testid');
input_pw.sendKeys('testpw');
login_btn.click();

})();

npm i jest
npm test 하면 자동 실행하도록 package.json에 추가

"scripts": {
   "serve": "vue-cli-service serve",
   "build": "vue-cli-service build && docker build --tag thanks9807295/frontend:local . && docker rm -f thanks9807295/frontend",
   "lint": "vue-cli-service lint",
   "test": "jest"
 },

예제 코드( login.test.js )

import { describe,expect,test} from "@jest/globals";
const {Builder ,By} = require('selenium-webdriver');

async function example() {

    let driver = await new Builder()
    // .setChromeOptions() // headless 설정 => 그래픽 UI가 아닌 곳에서 실행할 때, chrome창을 띄우지 않는다.
    .forBrowser('chrome')
    .build();
    await driver.get('https://nid.naver.com/nidlogin.login?mode=form&url=https://www.naver.com/');

    //성공 케이스

    const input_id = await driver.findElement(By.id('id'));
    input_id.sendKeys('');
    const input_pw = await driver.findElement(By.id('pw'));
    input_pw.sendKeys('');
    const login_btn = await driver.findElement(By.id('log.login'));
    login_btn.click();
    return true;
    //실패 케이스
}

describe("회원가입",()=>{

    const a =1,b=2;
    test("성공 케이스", async ()=>{
        expect(await example()).toEqual(true);
    });
    test("로그린 성공 케이스", ()=>{
        expect(a+b).toEqual(3);
    });
});

npm i jest-junit test 결과를 xml로 만들어주는 라이브러리