[94일차]20210723 front server 연결 / Next 설치

 

 

 

 

도메인 연결 

 

---

 

 

1. 로컬에서 잘 작동 되는지 확인 -> 실서버 올려서 실행 

localhost:8080 잘 나오는지 확인 

 

파워쉘 - front

cd front (ubuntu 아님 !!) 

npm run dev 

 

 

파워쉘 - aws-back 

ubuntu계정 - server on  (sudo node server.js)  

 

 

local에서 만든 코드 소스를 가지고 실 서버에 올리기 

 

index.html 만 읽을 수 있어 지금 nginx에서 그렇게 설정했었음

local 에 있는 소스를 webpack 으로 build 로 해야함 

웹팩 - 우리가 가진 jsx -> App.js 로 변경하기 

 

 

 

2. local에서 build를 했을 때 실행 잘 되는지 쳌 

 

웹팩 local- server

터미널 경로 - front 

npx webpack 실행 

 

webpack에 있는 dev server로 실행하는게 아닌 -> html을 라이브 서버로 켜보기 -> 잘되는지 확인 (build 잘 됨) 

 

 

 

3. local 에 있는 zhem -> github  -> aws cd ~ git clone -> build까지 -> NginX 설정 바꾸기 

nginx 설정해놓은건 www/index 로 설정되어있음

git clone 하면 저장소 이름 폴더명으로 바뀜 -> www를 저장소 이름으로 바꾸기 

 

1) github 내용 올리기

터미널 파워쉘 - front 경로 *-> github 올리기 

 

2) github 코드 clone

터미널 파워쉘 - aws-front 로 들어가기 ** 

cd ~ 

git clone [github주소]

ls  // 확인  

cd [git clone한 폴더]

ls  // local 내용이 그대로 있음

 

3) Nginx 설정값 바꾸기 -> 저장소 이름으로 

AWS_RestAPI_23Jul21

 

cd /etc/nginx/sites-available 

sudo vi myapp.conf -> i -> www -> github clone해온 파일명으로 수정 -> esc ->  shift + : wq!  

 

 

4) 실행 

sudo systemctl stop nginx 

sudo systemctl start nginx

sudo systemctl status nginx -> active(running) 확인 

 

 

5) 브라우저 aws-front public ip로 들어가보기 

* aws-server - server.js 있는 파일 들어가서 sudo node server.js 

aws-server와 front server 가 둘 다 실행되어있어야 front public ip 주소창이 잘 열린다. 

 

back public ip / api / comment -> json들이 나옴 

front public ip 는 api/comment 없이 브라우저에 그냥 입력해야 나옴  -> nginx 에 설정 그렇게 해놔서 ! 

 

* local server의 코드가 수정되면 -> git pull 로 수정 

 

 

 

 

담주 NEXT.js 

React  프레임워크 -> Next.js 프레임워크 를 만듬

Next.js 는 편하게 웹을 만들 수 있게 react를 도움 

 

리액트의 단점 : 한번에 모든 코드를 로드해야해서 처음 client 화면 보일 때 로딩이 좀 걸린다

페이지가 1개다 - url 변동 없다 -> naver가 리액트를 하나의 페이지라고 생각함 모든 메뉴를 검색해주지 않음 -> 페이스북처럼 으~엄청 많이 만들어도 검색 노출이 적다. 근데 구글은 됨 ! 

 

리액트 구조

Client Side Rendering CSR 

 

우리나라에서 리액트가 검색이 안되니까 => server-side-rendering 탄생 

 

서버사이드 랜더링 구조

Server Side Rendering - SSR

express 구조와 같음

 

최초의 한번만 위와 같은 구조로 실행되고 그 다음 요청부터는 리액트 방시긍로 처리한다. 

이게 가능한 이유는 next로 Client server 를 구축하게 되면 알아서 자동으로 첫 요청은 SSR, 그 다음 부터는 CSR로 요청을 처리해준다! 

 

NEXT를 하게되면 이런 리액트의 단점들을 조금 커버할 수 있다. 

-> 요청한 페이지만 랜더해서 줌 (순수하게 리액트로만 만든 것보다 속도가 빠를 수 있음) -> 근데 페이지를 넘어갈 때 조금 느려짐 (시간을 분배시킨 것) , 그리고 검색엔진에 노출이 된다 ( 국내 ) 

 

 

검색 엔진 (ex. google, naver..) 

 

 

 

네이버 웹 마스터 도구 - 사이트 등록하면 됨.  -> 웹마스터 도구 -> 사이트 관리 -> url 등록 -> meta head tag안에 넣고 안내에 따라 ㄱㄱ 

 

 

 

---

next 설치 

 

1. 새 폴더 만들기 - nextSample

2. 터미널 경로 nextSample 폴더로 들어가기 

3. npm init 

4. npm i next react react-dom  설치    -> webpack, babel 등 react에 필요한 개발 환경들 다 깔리게 됨 

5. package.json 추가 

{
  "name": "nextsample",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"next dev -p 3001 -H 0.0.0.0",       //dev server
    "build":"next build",  //build 할 때의 명령어 
    "start":"next start", // ssr next도 자체 서버를 가지고 있어 그 서버를 실행하는 명령어 
    "lint":"next lint"   // ESlint 환경설정 - 코드의 규칙 설정 
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^11.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

dev server - 여기서는 설정하는 것 없이 실행됨 기본적으로 port 3000을 가지고 시작 port가 꼬일 수 있기 때문에 port num 바꿔주기 

 

노트북 쓰거나 와이파이 쓰면 

-H 0.0.0.0 을 쓰게 되면 같은 와이파이를 쓰고 있는 핸드폰으로 내용 확인 가능 

 

 

6. next> pages 폴더 > index.jsx 파일 생성 

-> 여기서부터 react 부분 가능

const Homepage =()=>{
    return(
        <>
            Hello Next.js
        </>
    )
}

export default Homepage

 

npm 실행 

npm run dev 

 

localhost:3001 으로 들어가보면 -> 

이렇게 뜬다. 

 

7. pages> about.jsx 생성

const about = ()=>{
    return(
        <>
            Hello about
        </>
    )
}

export default about

 

localhost:3001/about 입장

 

 

8. 위와 똑같이 post.jsx 생성, 코드 생성 -> localhost:3001/post 들어가보면 

 

굳

자율성은 떨어졌지만 시간단축은 아쥬 잘됨 

 

이번 주말은 REACT CRUD, ,,