이번 그림 일기 프로젝트에서는 프론트 팀원들이 리액트 네이티브를 사용해서 앱을 만들기 때문에 React Native를 사용해서 개발한다.
실제로 개발후 APK를 도출해서 앱에 출시하는 개념이라 프론트 코드를 빌드할 필요가 없었다.
하지만 웹서버인 Nginx 와 프론트 코드를 같이 빌드하는 학습을 위해 이미지를 빌드해보았다.
FROM node:alpine AS builder
WORKDIR /usr/src/app
COPY package.json .
RUN npm install
# 세쌍둥이를 모두 가져와서 빌드한다 !
COPY . .
# npx expo start 프레임워크를 전부 다 다운받아 온다
RUN npx expo export
# 빌드 이후 새로운 Nginx 빌드를 진행한다
FROM nginx:latest
RUN rm -rf /etc/nginx/conf.d/*
# 만들어지는 컨테이너에 현재 ec2의 default 파일을 오른쪽에 경로에 복사한다 (엔진엑스 기본 설정)
COPY ./default.conf /etc/nginx/conf.d/default.conf
# 위 첫번째 빌드에서 만들어진 세쌍둥이를 복사해온다
COPY --from=builder /usr/src/app/dist /usr/share/nginx/html
# 파이프라인에서 이미지를 컨테이너화 할때 실행되는 파일이다 ! (즉 실행 파일들)
CMD [ "nginx", "-g", "daemon off;"]- RUN npx expo export:web 으로 실행할때 !
웹 빌드 결과물 복사 (절대 경로 사용)
COPY --from=builder /usr/src/app/web-build /usr/share/nginx/html
주석과 같은 설명 이외에
프론트 코드들을 RUN npx expo export 이후에 만들어진 압축파일을
마운트하여 엔진엑스를 실행시키는 개념이다.
웹 서버인 Nginx를 통해 프론트에서 page 즉 html 같은 정적 파일을 가져올 수 있는 것이다 !
아래는 Nginx 컨테이너 빌드시에 기본 설정을 지정해준다.
- nginx config 파일 작성
여기서의 NginX는 웹서버의 역할을 한다 →
react에는 웹서버의 기능이 없기에 Nginx를 통해서 만들어진 빌드 파일을 요청에 맞는 응답으로 전달해준다 !
vi default.confserver {
listen 3000;
# 모든 url(/)을 받겠다는 의미이다
location / {
# 요청이 들어오면 해당 디렉터리에 매핑한다 !
root /usr/share/nginx/html;
# 요청의 기본 파일인 index를 지정한다 (특정 파일 지정 안할시에) !
index index.html index.htm;
# 요청이 들어온 url을 나타내고 없을시에는 index로 매핑 !
try_files $uri $uri/ /index.html;
}
}-
image build 테스트
docker build -t newstar_front .
5. Docker image 확인
```bash
docker images
```
생각해보니 → RN 사용하니 서버에서 프론트를 배포할 필요는 없다 !
만들어지는 build 파일을 App store에 그대로 올린다 !
그렇기 때문에 서버에서 build 하는것이 아니구 로컬에서 build 해서 스토어에 배포하고 버전업을 시키는 방법으로 진행한다 !- 트러블 슈팅
필요한 종속성 설치를 통해 해결
RUN npx expo install react-native-web @expo/metro-runtime
라곰