채팅 소스부터 Https 주소까지

채팅 소스부터
HTTPS 주소까지
허광남 kenu@okky.kr

Ad
코드 한 줄 없는 프로그래밍 뇌 근육 강화
고등학교 수학 시간에 놀았던 분들
수학적 사고가 필요한 분들
수학의 정석보다 실용적인 예제
Sponsored by 인사이트

목차
1. 아주 간단한 채팅 프로그램
2. GitHub에 프로젝트 등록하기
3. AWS 서버 임대하기
4. 서버에 코드 배포하기
5. nginx 웹서버 연결하기
6. 도메인 연결하기
7. HTTPS 설정하기

1. 아주 간단한 채팅 프로그램
* node.js + express.js + socket.io
* 3개의 파일
* package.json : 라이브러리 설정
* server.js : 채팅 서버
* index.html : 웹 클라이언트

package.json
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {
"express": "^4.14.0",
"socket.io": "^1.5.0"
}
}

server.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function (socket) {
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
http.listen(3000, function () {
console.log('listening on *:3000');
});

index.html (1)
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>

index.html (2)
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$('form').submit(function () {
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function (msg) {
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>

2. GitHub에 프로젝트 등록하기
* https://github.com/ 아이디 등록
* Committer 설정
* 채팅 프로젝트 코드 전송

3. AWS 서버 임대하기
* https://aws.amazon.com/ 계정 등록
* 라이트세일에 서버 인스턴스 생성
* 네트워크에서 임시 포트 추가 3000

4. 서버에 코드 배포하기
* 연관 프로그램 설치
* git, node.js

5. nginx 웹서버 연결하기
* nginx 설치
* 리버스 프록시 연결 80 → 3000

6. 도메인 연결하기
* Route 53 에 도메인 구매
* IP 연결

7. HTTPS 설정하기
* Letsencrypt 무료 인증서 서비스
* 90일 갱신 이슈 때문에 자동연장 기능 추가 #crontab

수고하셨습니다!
https://youtube.com/kenuheo

채팅 소스부터 Https 주소까지

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie 채팅 소스부터 Https 주소까지

Ähnlich wie 채팅 소스부터 Https 주소까지 (20)

Mehr von Kenu, GwangNam Heo

Mehr von Kenu, GwangNam Heo (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (6)

채팅 소스부터 Https 주소까지