티포의개발일지

전 글에 이어서 사용자계정과 key 파일에 관하여 설명하겠다.

우분투 인스턴스를 만들면, root계정과 사용자 계정이 생기게 되는데, 사용자 계정을 여러개 만들고 계정에 따른

권한을 설정해줄 수 있다.

인스턴스를 VScode로 원격서버접속을 하게되면 당연히 권한이 제한되어 파일 수정, 저장이 불가능하게 된다.

때문에 인스턴스자체에서 사용자 계정에 권한을 부여해야한다.

또한 아무리 사용자 계정 이름과 IP주소를 안다 해도 아무 곳에서나 접속을 하면 안되기 때문에 이를 인증하기 위해

원격서버접속을 할 때 내가 인스턴스를 만든 사람이란걸 증명해야되는데 그 때 필요한 것이 ssh-key이다.

해당 리전에 대한 key가 있으면 되는데, 이 글은 Lightsail의 경우에 대해 설명하겠다.

1. 먼저 Lightsail 홈 상단에 계정-계정을 들어가준다.

2. ssh키 탭에 들어가서 인스턴스가 존재하는 리전의 key를 다운받아준다.

3. 그럼 이런식으로 생기게 되는데, 위 사진에서 보이는 것과 같이 (ap-northeast-2) <-- 이 이름에 맞는 키 파일을 기억해둔다.

4. 현재 이 pem 파일은 초기 권한 설정이 되어있기 때문에 컴퓨터 사용자만 가능하게하도록 권한을 제한해야된다.

( 이 과정을 안해주면 연결을 할 시에 오류가 뜬다. )

5. pem파일을 마우스 오른쪽 버튼으로 클릭하고 속성-보안-고급을 눌러준다.

6. 그럼 이 탭이 뜨게 되는데,

  좌측 하단의 '상속 사용 안함'-> '이 개체에서 사용된 사용 권한을 모두 제거합니다.' 를 클릭한다.

7. 그 다음 좌측 하단의 "상속 사용 안함" 버튼위에 추가를 누르고 보안 주체를 선택해 컴퓨터 사용자의

    이름을 적고 (제어판에서 확인 가능) 확인 버튼을 누른다.

이상으로 키 파일을 다운받고 키 파일의 권한을 설정해주었다.

인스턴스를 VSCode 환경에서 개발하기 위해 연결해주는 방법이다.

이 방법으로 LightSail뿐만 아니라 다른 인스턴스들도 연결이 가능하다.

1. VScode를 실행하고 확장탭에서 remote-ssh를 설치한다.

2. F1을 누르고 >Remote-SSH:Connect to Host 를 클릭한다.

3. Add New SSH Host를 클릭한다.

4. ssh ubuntu@xx.xx.xx.xx 를 입력하고 엔터를 누른다.

  (이때 ubuntu는 인스턴스의 사용자계정 이름이며, 뒤에 붙는 xx.xx.xx.xx는 IP주소입니다.)

5. 그럼 이런 내용이 ~/.ssh/config 파일에 작성되게 되는데

  Host xx.xx.xx.xx

    HostName xx.xx.xx.xx

    User ubuntu

6. 이를 다음과 같은 형태로 바꿔준다.

  Host gs_blog

    HostName xx.xx.xx.xx

    User ubuntu

    Port 22

    IdentityFile C:\ssh\Soo\LightsailDefaultKey-ap-northeast-2.pem

7. 여기서 Host 는 연결할 때 사용할 이름, User는 위에 입력했던 우분투 인스턴스의 사용자계정, Port는 SSH가

    사용되는 포트, IdentityFile은 ssh-key가 저장된 주소이다.

 사용자계정 권한, ssh-key에 관한 내용은 다음글에서 다루도록 하겠다.

이어서 만들어보자!

인스턴스를 생성해주면 IP주소가 계속 바뀌게 되어있다.

이를 방지하기위해 고정 IP를 생성해주면 처음 정의했던 IP주소대로 계속 쓸 수 있다.

1. 전 시간에 만들었던 인스턴스의 이름을 클릭한다.

2.  네트워킹 탭에서 주황색 글씨의 고정 IP연결을 클릭하고 생성을 눌러준다.

3. 만들어 준 인스턴스를 클릭하고 고정 IP이름을 설정해주고  생성!!

4. 그럼 이렇게 고정 IP가 생성된 것을 확인할 수 있다.

npm install next@latest react@latest react-dom@latest 실행하면 됩니다.

(저는 next@lastest만 실행했었는데 이런 오류가 떴었습니다.)

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

<< 실행하면 됩니다.

Git 등록방법

1.     깃에 등록할 파일에 git init

2.     git add .  , git commit -ma 실행

3.     git remote add origin git@github.com:[계정명]/[저장소명].git

4.     git remote show

5.     git push --force --set-upstream origin master

ssh 등록방법

1.     ssh 키 확인 ls -al ~/.ssh

2.     키 생성 ssh-keygen -t rsa -b 4096 -C gsjung06@naver.com

3.     Ssh-agent 실행 여부 확인 eval "$(ssh-agent -s)"

4.     키 등록 ssh-add ~/.ssh/id_rsa

정적 서버렌더링(getStaticProps)는 한번 불러오면 수정이 불가능하다. 따라서 왠만해서는

바꾸지 않는 내용들이 필요할 때 사용

동적 서버렌더링(getServerSidePorps)은 동적으로 데이터가 자주 바뀌는 페이지에 유용.

Next js 안에서 서버사이드 렌더링으로 db작업을 할 수는 있다.

서버 과부하가 왔을 때 express로 백엔드 서버를 만들고 하면

프론트 서버와 백엔드 서버중 과부하 되는 서버를 늘리기만 하면 되지만

Next js 안에서만 돌게하면 프론트 서버가 너무 무거워진다.

프론트엔드 서버 : 쿠키작업, 프론트 안에서 돌아가는 작업들( 로그인, 장바구니 등)

           → state가 프론트의 요청으로 바뀔 때

백엔드 서버 : DB작업, node_modules 사용할 작업

           → state가 백엔드의 요청으로 바뀔 때

           → 사실상 서버사이드 렌더링으로 프론트엔드에서도 node_module 사용 가능하다

           → DB작업은 차후에 GraphQL로 대체할 예정

Pages 에서 server, client 영역으로 나누고 각각에 맞는 요청을 정리할 것.

(node_modules를 어디서 쓸 지도)

1.     3000번 포트(next.js)에 /api/mobile/… 로 접속 -> modelquery 실행

장점 : 기본 oasis와 유사

단점 : /api/mobile 하위 파일들을 일일이 만들어줘야됨.

      무조건 /api/mobile 을 먼저 타고 가야됨.

2.     4000번 포트(graphql)에 쿼리 request전송(axios 처럼)

장점 : 3.3.3.3:4000 포트 한가지만 타고 쿼리 내용만 바꾸면 됨.

      원하는 쿼리문, 결과값을 받을 수 있음(라우터와 같은)

단점 : query에 대한 이해( 하루만에 설명 가능 )

3.     App 전용 backend port 설정 후 express 실행

장점 : 기존 oasis와 동일

단점 : 사용하는 포트의 개수가 많아짐.

4.     App 전용 backend server 구축

장점 : 기존 oasis와 동일

단점 : 사용하는 서버의 개수가 많아짐.

5.     Flutter-graphql 사용

학습 후 사용 가능

const express = require('express');

const next = require('next');

const morgan = require('morgan');

const cookieParser = require('cookie-parser');

const expressSession = require('express-session');

const dotenv = require('dotenv');

 

const dev = process.env.NODE_ENV !== 'production';

const prod = process.env.NODE_ENV === 'production';

 

dotenv.config();

 

const app = next({ dev }); // next 모듈을 사용

const handle = app.getRequestHandler();

 

//socket

const socketapp = require('express')();

const socketserver = require('http').createServer(socketapp)

const cors = require('cors');

socketapp.use(cors());

 

const ports = {

  next: process.env.NEXT_PUBLIC_React_Port,

  socket: process.env.NEXT_PUBLIC_Socket_Port

};

 

app.prepare().then(() => {

 

  //nextserver

  const server = express(); // back 서버에서의 const app = express()

  server.use(cors());

  server.use(morgan('dev'));

  server.use(express.json());

  server.use(express.urlencoded({ extended: true }));

  server.use(cookieParser(process.env.COOKIE_SECRET));

  server.use(

    expressSession({

      resave: false,

      saveUninitialized: false,

      secret: process.env.COOKIE_SECRET, // backend 서버와 같은 키를 써야한다.

      cookie: {

        httpOnly: true,

        secure: false,

      },

    }),

  );

  

  server.get('/hashtag/:tag', (req, res) => {

    return app.render(req, res, '/hashtag', { tag: req.params.tag });

  });

 

  server.get('/user/:id', (req, res) => {

    return app.render(req, res, '/user', { id: req.params.id });

  });

 

  server.get('*', (req, res) => { // 모든 get 요청 처리

    return handle(req, res); // next의 get 요청 처리기

  });

  server.listen(ports.next, () => {

    console.log('next+expresss running on port 3000');

  });

 

  //socketserver

  const io = require('socket.io')(socketserver,{

      cors : {

          origin: "http://"+process.env.NEXT_PUBLIC_IP+":"+process.env.NEXT_PUBLIC_React_Port, //해보니까 localhost는 안됨

          methods: ["GET", "POST"],

          allowedHeaders: ["*"],

          credentials: true,

      }

  });

 

  io.on('connection', socket=>{

      // socket으로 메세지가 들어올 때 

      socket.on('message',({chatList}) => {

          console.log("@@@")

          // 메세지가 들어올 때 보내줌

          io.emit('message',({chatList}))

      })

  })

 

  socketserver.listen(ports.socket, function(){

    console.log('listening on socket port 3001');

    })

});

1.     넥스트 서버를 동적분할하고 소켓서버를 열 수 있다.

2.     소켓서버에 cors설정을 해주고(json으로 된것들), 넥스트서버에도 cors 설정 해줘야함

정말 빠르게 AWS LightSail로 인스턴스를 만들어보자.

Lightsail에 관하여

https://lightsail.aws.amazon.com/ls/docs/ko_kr/all

1. aws 사이트에 회원가입, 로그인을 하고 Lightsail 서버를 찾아서 들어간다.

2. 인스턴스를 생성한다.

3. 원하는 리전을 선택한다.

※ 참고로 뭄바이는 다른 리전보다 느리다!! (이걸 모르고 회사에서 썼다가 애먹었다 ㅠㅠ)

4. 플랫폼을 선택한다. ( 저는 Linux Ubuntu 18.04 LTS 를 주로 사용했습니다. )

5. 가격을 선택한다. ( 물론 비쌀수록 더 성능이 좋습니다! )

6. 원하는 인스턴스 이름을 적고 생성해준다.

7. 생성하기 버튼을 누르면 끝!! ( 엄청 빠르다! )

  - 대기 중에서 조금 기다리시면 완료된다.