Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

0

Share

Download to read offline

채팅 소스부터 Https 주소까지

Download to read offline

아주 간단한 채팅 프로그램
GitHub에 프로젝트 등록하기
AWS 서버 임대하기
서버에 코드 배포하기
nginx 웹서버 연결하기
도메인 연결하기
HTTPS 설정하기

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

채팅 소스부터 Https 주소까지

  1. 1. 채팅 소스부터 HTTPS 주소까지 허광남 kenu@okky.kr
  2. 2. Ad 코드 한 줄 없는 프로그래밍 뇌 근육 강화 고등학교 수학 시간에 놀았던 분들 수학적 사고가 필요한 분들 수학의 정석보다 실용적인 예제 Sponsored by 인사이트
  3. 3. 목차 1. 아주 간단한 채팅 프로그램 2. GitHub에 프로젝트 등록하기 3. AWS 서버 임대하기 4. 서버에 코드 배포하기 5. nginx 웹서버 연결하기 6. 도메인 연결하기 7. HTTPS 설정하기
  4. 4. 1. 아주 간단한 채팅 프로그램 * node.js + express.js + socket.io * 3개의 파일 * package.json : 라이브러리 설정 * server.js : 채팅 서버 * index.html : 웹 클라이언트
  5. 5. 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" } }
  6. 6. 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'); });
  7. 7. 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>
  8. 8. 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>
  9. 9. 2. GitHub에 프로젝트 등록하기 * https://github.com/ 아이디 등록 * Committer 설정 * 채팅 프로젝트 코드 전송
  10. 10. 3. AWS 서버 임대하기 * https://aws.amazon.com/ 계정 등록 * 라이트세일에 서버 인스턴스 생성 * 네트워크에서 임시 포트 추가 3000
  11. 11. 4. 서버에 코드 배포하기 * 연관 프로그램 설치 * git, node.js
  12. 12. 5. nginx 웹서버 연결하기 * nginx 설치 * 리버스 프록시 연결 80 → 3000
  13. 13. 6. 도메인 연결하기 * Route 53 에 도메인 구매 * IP 연결
  14. 14. 7. HTTPS 설정하기 * Letsencrypt 무료 인증서 서비스 * 90일 갱신 이슈 때문에 자동연장 기능 추가 #crontab
  15. 15. 수고하셨습니다! https://youtube.com/kenuheo

아주 간단한 채팅 프로그램 GitHub에 프로젝트 등록하기 AWS 서버 임대하기 서버에 코드 배포하기 nginx 웹서버 연결하기 도메인 연결하기 HTTPS 설정하기

Views

Total views

1,029

On Slideshare

0

From embeds

0

Number of embeds

834

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×