API 서버 개발을 하기 전에 문득 그런 생각이 들었다.
어찌되었건 데이터를 집어 넣어야 하는데...그냥 코드로 가라 데이터를 만들어서 넣을까?
PUT API 를 정의 & 만드어서 그걸 호출하게 하면 되지 않을까?
그럼 PUT API 를 호출하는 건 그냥 postman 같은 걸로 할까?
아예 데이터를 추가 & 삭제할 수 있는 어드민 페이지를 간단하게나마 만드는게 낫지 않을까?
그래 그럼 그렇게 하자!!! FE 서버를 먼저 만들자!!!
의식의 흐름에 몸을 맡기기로 했다. 먼저 FE 서버를 만들어보자.
- GitHub repo 생성 (svelte + esbuild)
- 오라클 인스턴스 생성
- GitHub Actions 연동
- nginx 설치
svelte 나 esbuild 에 대해 1도 모르지만 그냥 일단 해보기로 했다.
뭐 어쨌든 Single Page Application 형태의 정적인 front-end 를 만들거다.
이 말은? build 를 돌려서 나온 결과물 (html + js + css + ...) 들을 웹서버 위치에 복사하는 형태임...
배포하는 과정은 대략 아래와 같을 것이다.
- GitHub repo 에 푸시
- GitHub Actions 발동
yarn installyarn build- 빌드 결과물을 nginx 웹 서버 위치에 복사
svelte + esbuild FE init
일단 https://github.com/Tazeg/svelte-esbuild-template 를 참조해서 esbuild 를 사용해서 빌드가 가능한 형태로 만들어서 푸시했다. (https://github.com/crazydj2/blog-frontend 참조)
-
package.json
- "svelte", "esbuild", "esbuild-svelte" 모듈 사용
- 빌드를 위한 스크립트 작성
{ "name": "blog-frontend", "version": "1.0.0", "repository": "git@github.com:crazydj2/blog-frontend.git", "license": "MIT", "dependencies": { "esbuild": "^0.14.28", "esbuild-svelte": "^0.6.3", "svelte": "^3.46.4" }, "scripts": { "build": "node esbuild.js" }, "type": "module" } -
esbuild.js
- 빌드 옵션 설정
import esbuild from 'esbuild'; import sveltePlugin from 'esbuild-svelte'; // esbuild build options esbuild.build({ entryPoints: ['./src/main.js'], bundle: true, minify: true, sourcemap: false, outfile: './public/build/bundle.js', // and bundle.css plugins: [ sveltePlugin() ] }).catch(e => { console.error(e); }); -
src/...
- 개발 파일들 (.svelte, .js 등등) 이 있는 위치
- 해당 파일들이 빌드를 거쳐 최종 산출물 (html, js, css, ... 등) 로 나옴
-
public/...
- 최종 산출물의 위치
- 현재는 그냥 index.html 을 박아두었고, 나중에 html 플러그인 사용해서 이 친구도 빌드시 만들어지도록 하자
public/index.html 을 그냥 실행해보면 아래와 같은 화면이 나온다... 성공...
GitHub Actions 연동
GitHub Actions 연동은 이전에 작성한 글대로 진행해서 성공했다...
https://velog.io/@crazydj/블로그-직접-만들기-대작전-GitHub-Actions-를-사용한-배포-환경-구축
다만 yml 파일 내용만 조금 변경해서 front-end 빌드 & 배포 작업을 수행했다. 이제는 push 하면 바로 배포가 수행된다.
name: frontend-deploy
on:
push:
branches: [ master ]
jobs:
frontend-deploy:
runs-on: self-hosted
steps:
- uses: actions/checkout@v2
- name: yarn install
run: yarn install
- name: yarn build
run: yarn build
- name: remove
run: rm -rf ./*
working-directory: /usr/share/nginx/blog-front/
- name: cp
run: cp -r ./public/* /usr/share/nginx/blog-front/nginx 설치
https://hgko1207.github.io/2020/11/16/linux-9/ 를 참조하여 설치했음.
참고로 블로그는 8080 포트를 사용할거기 때문에 기본 80 포트 뿐 아니라 8080 포트도 열어줬다.
# nginx 설치
$ sudo yum install -y nginx
# 포트 추가
$ sudo firewall-cmd --permanent --zone=public --add-port=80/tcp
$ sudo firewall-cmd --permanent --zone=public --add-port=8080/tcp
# 방화벽 재시작
$ sudo firewall-cmd --reload
# 개방된 포트 목록 확인
$ sudo firewall-cmd --list-ports
# 서비스 등록 & 시작
$ sudo systemctl enable nginx
$ sudo systemctl start nginx
# nginx 재시작
$ sudo systemctl restart nginxnginx 설치 후에 메인 설정 파일인 nginx.conf 파일을 보면 /usr/share/nginx/html 에 80 포트로 기본 웹서버가 설정되어 있는 것을 확인할 수 있다.
바로 아래에 블로그를 위한 웹서버 설정을 추가한다.
......
http {
......
# 기본적으로 설치되어 있는 서버
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
root /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
# 블로그를 위한 웹서버 추가
server {
listen 8080 default_server;
listen [::]:8080 default_server;
server_name _;
root /usr/share/nginx/blog-front;
location / {
try_files $uri $uri/ /index.html;
}
}
......
}결과물은? 짜잔~.
테스트 삼아 front 소스를 수정한 후 push 했을때 바로 반영되는 것 확인된다.
이제 데이터를 추가 & 삭제할 수 있는 어드민 페이지를 간단하게나마 만들자.
