DEPLOYMENT

🍔 핵심 내용

 

🥑 백엔드 배포

 

기존 폴더/파일들을 src 폴더로 옮겨놔야 한다.

 

거기서 옮겨 놔야 할 것은, 실제 배포에 필요한 파일들만 들어간다. 아래와 같이 넣었다.

 

npm i @babel/cli --dev-only 설치

npm i --save-dev @babel/plugin-transform-runtime 설치 (async 가능하게 해주는,,)

 

🍔 코드 리뷰

 

🥑 package.json

  "scripts": {
    "preinstall": "npx npm-force-resolutions",
    "dev": "nodemon --exec babel-node src/server --delay 2",
    "migrate": "npx prisma migrate dev --preview-feature",
    "studio": "npx prisma studio",
    "build": "babel src --out-dir build",
    "start": "node build/server"
  },

src 폴더에 넣은 파일들 (babel로 이쁜 js버전)을 컴퓨터가 인식할 수 있는 못생긴 js로 변형 시켜놔야 한다. 아웃풋될 폴더를 build 폴더명으로 지었다.

 

그리고, ignore파일에는 /build를 추가해주자.

 

 

🥑 babel.config.json

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

async를 이해할 수 있는? babel 플러그인도 추가. (사실 잘 모름 그냥 하라는 대로 함)

 

이렇게 까지 하고 npm start를 해보고 서버가 실행 되면 성공!

 

🥑 server.js

...
const apollo = new ApolloServer({
  resolvers,
  typeDefs,
  playground: true, // 추가
  introspection: true // 추가

  playground: true, 
  introspection: true 

를 추가 해준다.

 

***실제 배포 할 때는 위 2개를 다시 없애주어야 한다. (연결 되었는지 확인해보려고 하는 것임 중간에)

---

 

🍔 핵심 내용

 

🥑 heroku에 백엔드 배포

 

https://www.heroku.com/

Cloud Application Platform | Heroku

위 사이트 가입 후, 다운로드 후 지시대로 하면 된다.

 

여기서 포인트는 setting 란에서 아래와 같이 config Vars를 설정해주어야 한다. (기존 .env에 있는 내용들을)

 

그리고 postresql 을 아래 화면에서 생성해주자

 

마이그레이션 하는 방법은 다음 내용에

---

🍔 핵심 내용

 

🥑 헤로쿠 db 마이그레이션 방법

 

마이그레이션을 해주려면 몇 가지 세팅이 필요하다.

 

1. Procfile 파일 생성 후, 아래와 같이 텍스트 입력

 

release: npx prisma migrate deploy

web: npm start

 

그리고 나서 다시 git push heroku master 하면 된다.

 

🥑 헤로쿠 사용 대신, git origin으로 push 후 헤로쿠에서 가져갈 수 있게 세팅도 가능 하다.

 

가운데 github 부분을 이용하면 된다.

---

🍔 핵심 내용

 

🥑 프론트단 (web) 배포 하기 - netlify

 

netlify 가입 후, git을 연결해 준다. 그리고 아래와 같이 세팅

 

 

🥑apollo.js 

const httpLink = createHttpLink({
  uri:
    process.env.NODE_ENV === "production"
      ? "백엔드주소/graphql"
      : "http://localhost:4000/graphql",
});

 

🥑 public/_redirects

/* /index.html 200

추가

 

 

**다하고 나서는 꼭 git에 푸쉬해주자.

 

해당 netlify에서 도메인명도 바꿀 수 있으니 해보자.

---

🍔 핵심 내용

 

🥑 app 배포 하기

 

1. expo의 release channel 은 git의 branch처럼 여러 버전을 관리 할 수 있다. 베타 테스트용이나 실제 배포용이나 다르게 배포를 할 수 있는듯

 

2. expo에서는 한번 배포 후, js만 업데이트하는 것이라면 새로 또 배포 할 필요 없이 js 업데이트 후 자동으로 update가 된다. 하지만 다른 splash, icon, 사용자 이름 등의 정보를 바꾸게 되면 다시 배포를 진행 해야 한다.

 

한 번 build 후, 업데이트한 내용을 반영 하려면 expo publish 명령어만 치면 된다.

 

🥑 app.json

"ios": {
"bundleIdentifier": "com.yourcompany.yourappname",
"buildNumber": "1.0.0"
},
"android": {
"package": "com.yourcompany.yourappname",
"versionCode": 1
}

위와 같이 설정 후

 

아래와 같이 명령어 입력 (선택 1)

 

expo build:ios
expo build:android (이걸로 테스트 해보자)

-archive

 

---

🍔 핵심 내용

 

🥑 expo 와 eject

 

expo 에서 eject를 하게 되면 건 바이 건으로 필요한 expo 모듈들을 native로 옮기는 작업들을 해주면 된다. 그렇게 되면 expo + native를 사용 할 수 있다. 생각보다 번거롭지는 않은듯?

 

그리고 프로젝트 시작단계에서 3가지 방법이 있다.

 

1) expo로 시작 하기 (expo)  - expo 로 시작해서 나중에 eject 가능 (파일용량이 커짐)

2) native cli로 시작하기 (only native) - 순수 native로, expo를 사용 할 수 없음

3) create native app 으로 시작하기 (expo + native) - native로 시작하지만 expo를 사용 할 수 있음