-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathindex.html
233 lines (227 loc) · 16.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="ReText 3.1.0">
<title>index</title>
</head>
<body>
<h1>Web-разработка на node.js и express</h1>
<h3>Изучаем node.js на практике</h3>
<hr>
<h2>Содержание</h2>
<ul>
<li>
<h4><a href="#introduction">Вступление</a></h4>
</li>
<li>
<h4><a href="#chapter-1">Глава 1. Старт</a></h4>
<ul>
<li><a href="#environment">1.1 Рабочее окружение</a><ul>
<li><a href="#git-install">1.1.1 Установка git</a></li>
<li><a href="#node-install">1.1.2 Установка node.js и npm</a></li>
<li><a href="#ide">1.1.3 Среда разработки</a></li>
<li><a href="#hello-world">1.1.4 Express и первое приложение</a></li>
</ul>
</li>
<li><a href="#version-control">1.2 Система контроля версий</a><ul>
<li><a href="#git-setup">1.2.1 Настройка git</a></li>
<li><a href="#git-workflow">1.2.2 Работа с git</a></li>
<li><a href="#github">1.2.3 github</a></li>
</ul>
</li>
<li><a href="#deploying">1.3 Разворачиваем приложение</a><ul>
<li><a href="#heroku-setup">1.3.1 Настройка Heroku</a></li>
<li><a href="#deploy-hello-world">1.3.2 Разворачиваем приложение</a></li>
</ul>
</li>
</ul>
</li>
<li>
<h4><a href="#static-pages">Глава 2. Статические страницы</a></h4>
</li>
<li>
<h4><a href="#user-model">Глава 3. Модель пользователя</a></h4>
</li>
</ul>
<hr>
<h2><a name="introduction">Вступление</a></h2>
<p>Приветствую, перед вами небольшой учебник по практической разработке на node.js, с использованием фреймворка express. Я с большим энтузиазмом отношусь к node и сопутствующим технологиям. Node.js в первую очередь привлекает свежестью в подходах к разработке, смелостью и драйвом.</p>
<p>О том, что такое node.js вы можете прочитать на <a href="http://nodejs.org/">http://nodejs.org/</a>, если коротко - то это серверная платформа, для выполнения javascript. Так же мы будем использовать express, web-фреймворк построеный на концепции <a href="http://stephensugden.com/middleware_guide/">middleware</a> (о том, что это такое, поговорим поподробнее чуть позже)</p>
<p>В процессе изучения мы познакомимся с различными аспектами web-разработки, такими как использование системы контроля версий, автоматическое тестирование и так далее. В результате по ходу изучения мы разработаем вполне рабочее web-приложение (простенький аналог твиттера)</p>
<p>Хочется отметить, что очень большое влияние на меня оказал <a href="http://ruby.railstutorial.org/ruby-on-rails-tutorial-book">railstutorial</a>, это лучшее пособие по web-разработке, которое я встречал, и мне очень хотелось бы создать нечто подобное для node.js.</p>
<hr>
<h2><a name="chapter-1">Глава 1. Старт</a></h2>
<p>В этой главе мы развернем рабочее окружение с нуля, установим все необходимые инструменты, создадим простенькое приложение и даже запустим его на облачном хостинге.</p>
<h3><a name="environment">1.1 Рабочее окружение</a></h3>
<p>Так как я в основном использую в работе linux, а если точнее - Ubuntu 12.04, основная часть инструкций по установке тех или иных инструментов будет ориентирована на ползователей линукс, но я буду стараться по возможности давать ссылки на инструкции и для других ОС.</p>
<p>Для того чтобы точно следовать инструкциям в учебнике, вам нужно будет поставить систему контроля версий <a href="http://ru.wikipedia.org/wiki/Git">git</a>, дело в том, что мы не только будем размещать код своих проектов в git, но и устанавливать многие инструменты из репозиториев на <a href="https://github.com/">гитхабе</a>.</p>
<p>Так что, первое что мы сделаем - это...</p>
<h4><a name="git-install">1.1.1 Установка git</a></h4>
<p>Пользователи apt-based дистрибутивов могут выполнить в терминале:</p>
<pre><code>$ sudo apt-get install git-core
</code></pre>
<p>Остальные отправляются читать инструкции по адресу <a href="http://git-scm.com/book/ch1-4.html">http://git-scm.com/book/ch1-4.html</a></p>
<h4><a name="node-install">1.1.2 Установка node.js и npm</a></h4>
<p>Теперь пришло время поставить последнюю стабильню версию node.js (на текущий момент это 0.8.1) и npm (установщик пакетов для node). </p>
<p>Инструкции по установке разных ОС можно найти <a href="https://github.com/joyent/node/wiki/Installation">здесь</a></p>
<p>Для начала устанавливаем все что необходимо для компиляции пакета из исходников:</p>
<pre><code>$ sudo apt-get install python g++ curl libssl-dev apache2-utils
</code></pre>
<p>Теперь скачиваем исходный код:</p>
<pre><code>$ cd /tmp
$ git clone https://github.com/joyent/node.git
$ cd node
$ git checkout v0.8.1
</code></pre>
<p>Посделний этап - компиляция и установка:</p>
<pre><code>$ ./configure
$ make
$ sudo make install
</code></pre>
<p>Когда все благополучно завершится, можно проверить версии пакетов, должно получиться:</p>
<pre><code>$ node -v
v0.8.1
$ npm -v
1.1.33
</code></pre>
<p>Если есть желание - можно запустить консоль node и поиграться с интерпретатором javascript.</p>
<h4><a name="ide">1.1.3 Среда разработки</a></h4>
<p>Тут каждый волен выбирать по своему вкусу, лично меня вполне устраивает gedit с установленным набором плагинов <a href="https://github.com/gmate/gmate/">gmate</a>. Вполне подходят Netbeans или Webstorm.</p>
<h4><a name="hello-world">1.1.4 Express и первое приложение</a></h4>
<p>Теперь пришло время познакомиться с фреймворком <a href="http://expressjs.com/">express</a>. Фреймворк очень простой, и вполне приемлемо документированный. Единственный неудобный момент - это то, что мы будем использовать бета версию 3.0.x а документация на официальном сайте написана для 2.x, так что советую иметь под рукой <a href="https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x">migration guide</a></p>
<p>Устанавливаем express глобально:</p>
<pre><code>$ sudo npm install -g [email protected]
</code></pre>
<p>Создаем директорию для наших учебных проектов:</p>
<pre><code>$ mkdir -p ~/projects/node-tutorial
$ cd ~/projects/node-tutorial
</code></pre>
<p>Создаем проект и устанавливаем зависимости:</p>
<pre><code>$ express node-demo-app
$ cd node-demo-app && npm install
</code></pre>
<p>Теперь можно заглянуть в то что нам сгенерировал генератор приложений, вот внутренности app.js:</p>
<pre><code>/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, http = require('http');
var app = express();
app.configure(function(){
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
app.configure('development', function(){
app.use(express.errorHandler());
});
app.get('/', routes.index);
http.createServer(app).listen(app.get('port'), function(){
console.log("Express server listening on port " + app.get('port'));
});
</code></pre>
<p>Думаю, что люди знакомые с javascript могут предположить что тут происходит. Подключаются необходимые модули, конфигурируется приложение и запускается на 3000-м порту.</p>
<p>Теперь приложение можно запустить:</p>
<pre><code>$ node app
</code></pre>
<p>И увидеть результат работы <a href="http://localhost:3000/">http://localhost:3000/</a></p>
<h3><a name="version-control">1.2 Система контроля версий</a></h3>
<p>Теперь, когда у нас уже есть рабочее приложение, более подробно коснемся работы с сисемой контроля версий. Для того чтобы лучше познакомиться с работой git, стоит почитать книжку <a href="http://git-scm.com/book">Pro Git</a>, но можно и обойтись инструкциями в данном учебнике.</p>
<h4><a name="git-setup">1.2.1 Настройка git</a></h4>
<p>Для более комфортной работы с git стоит сначала указать свои личные данные:</p>
<pre><code>$ git config --global user.name "Your Name"
$ git config --global user.email [email protected]
</code></pre>
<p>И настроить алиасы для наиболее часто используемых комманд:</p>
<pre><code>$ git config --global alias.co checkout
$ git config --global alias.ci commit
</code></pre>
<h4><a name="git-workflow">1.2.2 Работа с git</a></h4>
<p>Git настроен и можно размещать наше приложение в репозитории, инициализируем новый репозиторий:</p>
<pre><code>$ git init
</code></pre>
<p>Добавляем директорию с зависимостями приложения в gitignore:</p>
<pre><code>$ echo '/node_modules' > .gitignore
</code></pre>
<p>Помещаем все файлы в индекс и создаем первый коммит:</p>
<pre><code>$ git add .
$ git ci -m "Initial commit"
</code></pre>
<h4><a name="github">1.2.3 github</a></h4>
<p>После размещения кода проекта в репозитории пришло время выложить проект на <a href="http://github.com/">GitHub</a>. GitHub - это социальная сеть и хостинг для проектов. Огромное число opensource проектов хостится на гитхабе, так что если вы там еще не зарегистрированы - самое время <a href="http://github.com/signup/free">сделать это</a> (возможно вам придется сначала <a href="https://help.github.com/articles/generating-ssh-keys">разобраться с ssh ключами</a>)</p>
<p><a href="https://github.com/new">Создаем</a> новый репозиторий node-demo-app.</p>
<p>Выкладываем код на гитхаб:</p>
<pre><code>$ git remote add origin [email protected]:ваш_ник_на_гитхабе/node-demo-app.git
$ git push -u origin master
</code></pre>
<h3><a name="deploying">1.3 Разворачиваем приложение</a></h3>
<p>Теперь наступает самый волнующий этап, мы будем разворачивать приложение на хостинге.
Для этого воспользуемся услугами облачной системы деплоя <a href="http://www.heroku.com/">Heroku</a>.</p>
<h4><a name="heroku-setup">1.3.1 Настройка Heroku</a></h4>
<p>Для начала нам надо <a href="https://api.heroku.com/signup">зарегистрироваться</a> и установить необходимый <a href="https://toolbelt.heroku.com/">инструментарий</a>.</p>
<p>Пользователи ubuntu выполняют:</p>
<pre><code>$ wget -qO- https://toolbelt.heroku.com/install.sh | sh
</code></pre>
<p>Когда установка завершится, нужно будет залогиниться из коммандной строки:</p>
<pre><code>$ heroku login
</code></pre>
<h4><a name="deploy-hello-world">1.3.2 Размещаем приложение на heroku</a></h4>
<p>Теперь наше окружение полностью готов к выкладке на хостинг. Размещение node.js проекта на Heroku требует еще нескольких действий, вы можете почитать об этом в <a href="https://devcenter.heroku.com/articles/nodejs">документации</a> или просто выполнить инструкции.</p>
<p>В файле package.json нашего проекта, нужно указать версии ноды и npm, package.json должен выглядеть так:</p>
<pre><code>{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app"
},
"dependencies": {
"express": "3.0.0beta4",
"jade": "*"
},
"engines": {
"node": "0.8.x",
"npm": "1.1.x"
}
}
</code></pre>
<p>Теперь в корне проекта создаем файл Procfile:</p>
<pre><code>$ echo 'web: node app.js' > Procfile
</code></pre>
<p>Проверяем что все запускается с помощью менеджера процессов:</p>
<pre><code>$ foreman start
</code></pre>
<p>Приложение должно быть доступно на <a href="http://localhost:5000/">http://localhost:5000/</a></p>
<p>Добавляем файлы в репозиторий:</p>
<pre><code>$ git add .
$ git ci -m "Added Procfile and engines"
$ git push
</code></pre>
<p>Создаем приложение на heroku:</p>
<pre><code>$ heroku create
$ git push heroku master
</code></pre>
<p>Набираем:</p>
<pre><code>$ heroku open
</code></pre>
<p>и любуемся задеплоеным приложением.</p>
<hr>
<h2><a name="static-pages">Глава 2. Статические страницы</a></h2>
<p>Suspendisse hendrerit quam mollis magna pharetra ac convallis justo laoreet. Morbi sit amet malesuada arcu. Sed adipiscing tempus rutrum. Aenean lacinia metus et augue aliquam pulvinar. Praesent nulla ante, ullamcorper vitae varius quis, ullamcorper sit amet risus. Nulla facilisi. Ut risus arcu, convallis a ornare eu, tempor sed elit. Mauris auctor, tellus cursus congue convallis, lorem neque hendrerit turpis, at viverra erat ipsum ut nunc. Fusce non lectus massa, vitae imperdiet lorem. Curabitur dapibus ullamcorper est, ut vestibulum
diam sollicitudin sit amet. </p>
<hr>
<h2><a name="user-model">Глава 3. Модель пользователя</a></h2>
<p>Suspendisse hendrerit quam mollis magna pharetra ac convallis justo laoreet. Morbi sit amet malesuada arcu. Sed adipiscing tempus rutrum. Aenean lacinia metus et augue aliquam pulvinar. Praesent nulla ante, ullamcorper vitae varius quis, ullamcorper sit amet risus. Nulla facilisi. Ut risus arcu, convallis a ornare eu, tempor sed elit. Mauris auctor, tellus cursus congue convallis, lorem neque hendrerit turpis, at viverra erat ipsum ut nunc. Fusce non lectus massa, vitae imperdiet lorem. Curabitur dapibus ullamcorper est, ut vestibulum
diam sollicitudin sit amet. </p>
<hr>
<p>Copyright David Klassen, 2012. </p>
</body>
</html>