<script>
export default {
// data()에서 반환된 속성들은 반응적인 상태가 되어 `this`에 노출됩니다.
data() {
return {
count: 0
}
},
// methods는 속성 값을 변경하고 업데이트 할 수 있는 함수.
// 템플릿 내에서 이벤트 헨들러로 바인딩 될 수 있음.
methods: {
increment() {
this.count++
}
},
// 생명주기 훅(Lifecycle hooks)은 컴포넌트 생명주기의 여러 단계에서 호출됩니다.
// 이 함수는 컴포넌트가 마운트 된 후 호출됩니다.
mounted() {
console.log(`숫자 세기의 초기값은 ${ this.count } 입니다.`)
}
}
</script>
<template>
<button @click="increment">숫자 세기: {{ count }}</button>
</template>
-CompositionAPI
재사용성이 좋은 컴포넌트 구조
<script setup>
import { ref, onMounted } from 'vue'
// 반응적인 상태의 속성
const count = ref(0)
// 속성 값을 변경하고 업데이트 할 수 있는 함수.
function increment() {
count.value++
}
// 생명 주기 훅
onMounted(() => {
console.log(`숫자 세기의 초기값은 ${ count.value } 입니다.`)
})
</script>
<template>
<button @click="increment">숫자 세기: {{ count }}</button>
</template>
// 스프링 서버 전역적으로 CORS 설정
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:5000") // 허용할 출처, 이후 배포된 사이트의 도메인을 추가
.allowedMethods("GET", "POST", "PUT", "DELETE") // 허용할 HTTP method
.allowCredentials(true) // 쿠키 인증 요청 허용
.maxAge(3000); // 원하는 시간만큼 pre-flight 리퀘스트를 캐싱
}
#AWS CLI 다운로드 및 배포
AWS 계정 생성 후 AWS console에 IAM 으로 1로그인
++IAM ( Identity and Access Management )
기업에서 많은 개발자가 접근할 수 있는 계정이 있어야 하는데 만약 기업 계정에 모든 개발자가 아이디와 비밀번호를 알고 접근할 수 있게 하는것은 위험하므로
github엔 민감한 정보를 secret으로 설정하고 변수처럼 사용할 수 있는 기능이 있다.
repository의 setting - security - secrets and variables - actions - new repository secret
위에 배포환경 profile에 대해 설명할 때 나온 env.properties 와 application.properties를 애플리케이션이 아닌
secret에 설정하고 workflow에서 배포할 때 파일을 만든 후 애플리케이션을 build 한다.
배포 과정에서 aws access key id와 aws secret access key 가 필요하므로 설정해준다.
이렇게 한번 만들어주면 다시 들어가도 이전에 초기화해둔 값을 확인하지 못하기 때문에
repository를 공유하는 팀원간에도 민감한 정보의 유출을 막으면서 변수를 사용해 값을 사용할 수 있다.
#workflow 작성
레포지토리의 actions에 들어가면 new workflow를 작성할 수도 있고
깃헙에서 제공하는 템플릿을 이용해 작성할 수도 있다.
# This workflow uses actions that are not certified by GitHub.
# They are provided by a third-party and are governed by
# separate terms of service, privacy policy, and support
# documentation.
# This workflow will build a package using Gradle and then publish it to GitHub packages when a release is created
# For more information see: https://github.com/actions/setup-java/blob/main/docs/advanced-usage.md#Publishing-using-gradle
name: Java CI with Gradle
on:
push:
branches:
- master
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Set up JDK 17
uses: actions/setup-java@v3
with:
java-version: '17'
distribution: 'temurin'
- name: Run chmod to make gradlew executable
run: chmod +x ./gradlew
- name: make application.properties
run: |
cd ./src/main/resources
touch ./application.properties
echo "${{ secrets.APP_PROPERTIES }}" > ./application.properties
- name: make env.properties
run: |
cd ./src/main/resources
touch ./env.properties
echo "${{ secrets.ENV_PROPERTIES }}" > ./env.properties
- name: Build with Gradle
uses: gradle/gradle-build-action@bd5760595778326ba7f1441bcf7e88b49de61a25 # v2.6.0
with:
arguments: clean build bootJar
- name: Get current time
uses: 1466587594/get-current-time@v2
id: current-time
with:
format: YYYYMMDDTHHmm
utcOffset: "+09:00"
- name: Generate deployment package
run: |
mkdir -p deployment
cp build/libs/danaga-0.0.1-SNAPSHOT.jar deployment/danaga-0.0.1-SNAPSHOT.jar
# cp deployment/Procfile deployment/Procfile
cd deployment && zip -r danaga-${{steps.current-time.outputs.formattedTime}} .
ls
- name: Deploy Danaga to EB
uses: einaregilsson/beanstalk-deploy@v14
with:
aws_access_key: ${{secrets.AWS_ACCESS_KEY_ID}}
aws_secret_key: ${{secrets.AWS_SECRET_ACCESS_KEY}}
application_name: danaga-app
environment_name: Danaga-env
version_label: danaga-${{steps.current-time.outputs.formattedTime}}
region: ap-northeast-1
deployment_package: deployment/danaga-${{steps.current-time.outputs.formattedTime}}.zip
on: push: branches: - master
master 브랜치에 push될 때 workflow가 trigger된다.
스프링부트3는 자바17이상을 지원하기 때문에 자바 17로 세팅한다.
- name: Run chmod to make gradlew executable run: chmod +x ./gradlew
그냥 빌드를 하려 했더니 gradle 실행 권한이 없어서 권한을 주는 step을 추가한다.
- name: make application.properties run: | cd ./src/main/resources touch ./application.properties echo "${{ secrets.APP_PROPERTIES }}" > ./application.properties
- name: make env.properties run: | cd ./src/main/resources touch ./env.properties echo "${{ secrets.ENV_PROPERTIES }}" > ./env.properties
빌드를 하기 전에 applciation.properties와 env.properties 파일을 생성하고 빌드한다.
- name: Generate deployment package run: | mkdir -p deployment cp build/libs/danaga-0.0.1-SNAPSHOT.jar deployment/danaga-0.0.1-SNAPSHOT.jar # cp deployment/Procfile deployment/Procfile cd deployment && zip -r danaga-${{steps.current-time.outputs.formattedTime}} . ls
