Ubuntu 14.04 plus frontend guide

Table of Contents generated with DocToc

1. Ubuntu после установки
2. LAMP
3. Nodejs
- 3.1 Npm пакеты
4. Ruby
5. Git
- 5.1 SSH ключ
- 5.2 Git clone
6. Virtual host
7. Sublime Text 3
- 7.1 Настройки
- Проекты

1. Ubuntu после установки

Положим, что у нас на руках свежеустановленная Ubuntu 14.04.

1.1 Tilda

Tilda — терминал, доступный в любой момент времени по горячей клавише. Ее удобно для сиюминутных действий (действия с git и т.д.), а какой-нибудь gulp или compass можно запустить в обычном терминале.

1.1.1 Terminal

Открываем стандартный терминал с помощью сочетания клавиш:

ctrl + alt + t

Меняем цвет терминала:

Edit -> Profile Preferences -> Colors

Убираем галку с Use colors from system theme, ставим Green on Black

1.1.2 Tilda: установка

Устанавливаем:

sudo apt-get install tilda

Ищем в Dash: нажимаем клавишу Super, пишем Tilda, запускаем

Главное меню (Dash)

Меню в котором можно воспользоваться поиском как по локальным (установленные приложения, файлы и папки, музыка), так и по удалённым (доступные для установки приложения, видео на YouTube).

1.1.3 Tilda: настройка

В настройках меняем:

Ставим галку на Start Tilda hidden
Во вкладке Appearance ставим height 30% и width 100%
В Extras включаем прозрачность: Enable Transparency
Там же устанавливаем уровень прозрачности на свой вкус Level of Transparency
Во вкладке Сolors ставим тему Green on Black

Теперь по хоткею F1 на любом рабочем столе будет открываться терминал

1.1.4 Tilda: автозапуск

Ищем в Dash приложение Startup Applications, жмем Add, указываем:

Поле	Значение
Name:	Tilda
Command:	tilda

1.2 Restircted extras

help.ubuntu.ru:

К сожалению, в Ubuntu по умолчанию не входят библиотеки поддержки многих популярных форматов мультимедиа-файлов, а так же некоторые другие нужные программы, например, flash-плагин для интернет-браузера и набор шрифтов Microsoft. Поэтому всё это необходимо ставить дополнительно из репозиториев.

sudo apt-get install ubuntu-restricted-extras

1.3 Unity Tweak Tool

По умолчанию Ubuntu поставляется окружением рабочего стола Unity. Будем ориентироваться на него. Установим твикер:

sudo apt-get install unity-tweak-tool

Запускаем, правим

Launcher -> Search: ускоряем поиск приложений убирая галки с
- Search online sources
- Show "More Suggestion"
- Enable search of your files
Switcher -> убираем Display "Show Desktop" icon из alt + tab

1.4 System update

Обновляем систему

sudo apt-get update && sudo apt-get upgrade

1.5 Workspaces: рабочие столы

Включаем дополнительные рабочие столы: в Dash вводим appearance, во вкладке Behavior отмечаем галку Enable workspaces.

Теперь можно переключать рабочий стол по сочетанию клавиш:

Ctrl + Alt + Стрелка

Перетащить окно между рабочими столами можно с помощью:

Ctrl + Alt + Shift + Стрелка

Посмотреть остальные хоткеи можно зажав клавишу Super.

Я, например, организую рабочие столы так

Браузеры
Редактор
Терминалы
Почта и прочее

1.6 Software

Скачиваем и устанавливаем следующие программы:

Skype : Ubuntu 12.04 multiarch
Google Chrome : 64 bit .deb (For Debian/Ubuntu)
Sublime Text 3 : Ubuntu 64 bit

2. LAMP

Wikipedia:

LAMP — акроним, обозначающий набор (комплекс) серверного программного обеспечения, широко используемый во Всемирной паутине. LAMP назван по первым буквам входящих в его состав компонентов:

Linux — операционная система Linux;

Apache — веб-сервер;

MariaDB / MySQL — СУБД;

PHP — язык программирования, используемый для создания веб-приложений (помимо PHP могут подразумеваться другие языки, такие как Perl и Python).

Если Вы до этого использовали Windows, то, скорее всего локальные веб-серверы обслуживал Denwer. Теперь же мы установим все, как на настоящих серверах.

2.1 Apache

Устанавливаем Apache 2:

sudo apt-get install apache2

Проверяем, что Apache установился, зайдя в браузере по адресу http://localhost.

Все веб-серверы будут лежать внутри папки /var/www, добавляем ее в закладки Nautilus (проводника) для быстрого доступа:

Computer -> var -> www -> нажимаем Ctrl + D

Теперь папка /var/www должна появиться во вкладке Bookmarks, между Devices и Network.

2.1.1 .htaccess

По умолчанию файлы .htaccess отключены, включим их отредактировав конфигурационный сервер Apache:

sudo gedit /etc/apache2/apache2.conf

Ищем в нем настройки папки /var/www:

<Directory /var/www/>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
</Directory>

Заменим в ней директиву AllowOverride:

AllowOverride All

После изменения любых настроек в конфиге Apache его нужно перезапустить, чтобы изменения вступили в силу:

sudo service apache2 restart

2.1.2 mod_rewrite

Включим модуль рерайтов, без него работает редкий сайт:

sudo a2enmod rewrite && sudo service apache2 restart

2.2 MySql

Устанавливаем mysql. В процессе установки Вас попросят ввести root'овый пароль для базы.

sudo apt-get install mysql-server php5-mysql

Создаем структуру базы данных:

sudo mysql_install_db

Удаляем default'ные настройки:

sudo mysql_secure_installation

Сначала вводим пароль, который указали при установке, на вопрос Change the root password отвечаем n, на остальные вопросы отвечаем по умолчанию (то, что выделено большой буквой).

Проверяем установку, вводим три команды (первая попросит пароль от базы данных):

mysql -uroot -p
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
+--------------------+
3 rows in set (0.00 sec)

exit

2.3 PHP

2.3.1 PHP: установка

sudo apt-get install php5 libapache2-mod-php5 php5-mcrypt php5-curl php5-gd

Проверяем, что php установился:

php -v
PHP 5.5.9-1ubuntu4.3 (cli) (built: Jul  7 2014 16:36:58)
Copyright (c) 1997-2014 The PHP Group
Zend Engine v2.5.0, Copyright (c) 1998-2014 Zend Technologies
    with Zend OPcache v7.0.3, Copyright (c) 1999-2014, by Zend Technologies

2.3.2 mod_dir

Подкорректируем настройки Apache, чтобы по умолчанию открывался файл index.php, а не index.html. Для этого откроем конфигурационный файл модуля Dir веб-сервера Apache в текстовом редакторе:

sudo gedit /etc/apache2/mods-enabled/dir.conf

Заменим в нем список индексных файлов, удалив ненужные:

<IfModule mod_dir.c>
	DirectoryIndex index.php index.html
</IfModule>

Сохраняем и перезапускаем Apache:

sudo service apache2 restart

2.4 PhpMyAdmin

Устанавливаем phpmyadmin. В процессе установки потребуется root'овый пароль от базы данных, а также нужно будет ввести пароль для нового пользователя БД phpmyadmin.

sudo apt-get install phpmyadmin

Открываем настройки Apache:

sudo gedit /etc/apache2/apache2.conf

Добавляем в конец строчку

Include /etc/phpmyadmin/apache.conf

Перезапускаем apache:

sudo service apache2 restart

Проверяем, что phpmyadmin работает, зайдя в браузере по адресу:

http://localhost/phpmyadmin

В качестве логина следует вводить phpmyadmin, пароль Вы задавали в процессе установки. Заходить под пользователем root не рекоммендуется.

2.5 /var/www: устанавливаем права

В Ubuntu веб-сервер Apache работает от пользователя www-data (группа www-data). Мы добавляем Вашего пользователя в эту же группу, а также ставим на /var/www по умолчанию группу www-data. Если этого не сделать, то когда Вы будете создавать файлы в этой папке, они будут создаваться от группы и у Apache не будет к ним доступа на запись.

Подробнее про команды:

chmod
chown

В качестве <username> нужно указать имя своего пользователя:

sudo adduser <username> www-data; sudo chgrp -R www-data /var/www; sudo chmod -R g+rw /var/www; find /var/www -type d -print0 | sudo xargs -0 chmod g+s

Теперь нужно перелогиниться, чтобы добавление пользователя в группу www-data возымело силу.

3. Nodejs

Устанавливаем nodejs и менеджер пакетов npm

sudo apt-get install nodejs nodejs-legacy npm

3.1 Npm пакеты

Устанваливаем необходимые пакеты с флагом -g, глобально. После этого любой из этих пакетов мы сможем использовать в терминале, как обычную команду.

sudo npm install -g bower jshint jscs csscomb gulp npm-check-updates

4. Ruby

Устанавливаем Ruby:

sudo apt-get install ruby ruby-compass

Устанавливаем gem'ы:

sudo gem install compass sass scss-lint

5. Git

Устанавливаем git:

sudo apt-get install git

Указываем свои email и имя:

git config --global user.email "[email protected]"
git config --global user.name "Your Name"

5.1 SSH ключ

Генерируем ssh ключ, указав в комментарии свой email:

ssh-keygen -t rsa -C "[email protected]"

Сохраняем в директории по умолчанию (жмем enter):

Enter file in which to save the key (/home/koste/.ssh/id_rsa):

Указываем passphrase для разблокировки ключа. Этот пароль нужно будет вводить один раз за сеанс работы с системой (т.е. после каждого логина).

Enter passphrase (empty for no passphrase)

Чтобы посмотреть ключ и скопировать его для добавления на Github / Gitlab / Bitbucket мы можем воспользоваться командой cat:

cat ~/.ssh/id_rsa.pub

5.2 Git clone

Проверяем, что git и ключ работают:

cd /var/www
git clone [email protected]:mrpavlikov/kelnik-foundation.git kelnik-foundation
cd kelnik-foundation
npm install

Если npm в процессе установки начнет ругаться, что ему не хватает прав, то скорее всего в домашней директории создалась папка tmp от пользователя root. Исправляем запуском команды

sudo chown <username>:<username> ~/tmp

после чего заново запускаем

npm install

6. Virtual host

Например, в Denwer нужно создать в определенной папке новую директорию вида example.local, и этот домен будет открываться в браузере локально. В Linux эта процедура чуть сложнее.

Чуть раньше мы склонировали в папку /var/www/kelnik-foundation репозиторий. Положим, мы хотим, чтобы этот виртуальный хост имел имя foundation.local.

Первое, что нам нужно сделать — создать конфигурацию. Впоследствии для каждого проекта (папки в /var/www/) нужно будет делать свой конфигурационный файл.

6.1 Virtual host: создание конфига

Зайдем в папку, в которой лежат все конфиги виртуальных хостов:

cd /etc/apache2/sites-available/

В этой папке есть шаблонный конфиг 000-default.conf, скопируем его и назовем по имени домена, по которому он будет открываться foundation.local.conf:

sudo cp 000-default.conf foundation.local.conf

Важно: у конфига всегда должно быть расширение .conf

Откроем вновь созданный файл в текстовом редакторе:

sudo gedit foundation.local.conf

Удалим комментарии
В качестве имени сервера укажем foundation.local
Добавим параметр ServerAlias, чтобы проект открывался также по адресу www.foundation.local
Укажем в качестве DocumentRoot (публичная часть) папку, в которую мы склонировали проект. Здесь следует обратить внимание на www на конце, публичная директория на уровень глубже папки проекта.
Добавим префикс foundation.local- к именам файлов ErrorLog и CustomLog, чтобы логи для каждого проекта велись отдельно
Для примера добавим переменную окружения, обозначающую, например, для Zend, что проект работает в режиме разработки, от этого параметра может зависеть вывод ошибок и т.д.

В итоге конфиг должен выглядеть примерно так:

<VirtualHost *:80>
    ServerName foundation.local
    ServerAlias www.foundation.local

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/kelnik-foundation/www

    SetEnv APPLICATION_ENV "development"

    ErrorLog ${APACHE_LOG_DIR}/foundation.local-error.log
    CustomLog ${APACHE_LOG_DIR}/foundation.local-access.log combined
</VirtualHost>

6.2 Virtual host: включение

Мы добавили конфигурацию нового виртуального хоста. Создали мы его в папке sites-available, что как бы намекает нам, что этот конфиг доступен, но не включен. Каждый конфиг, который мы создаем, нужно включать:

sudo a2ensite foundation.local.conf

На заметку:

В любой момент виртуальный хост можно выключить командой a2dissite, при этом его конфиг не сотрется.
Выполнить команду a2ensite и прочие команды Apache можно из любой папки. Кнопка tab совершит автодополнение в любом случае, так как система знает, где находятся конфигурационные файлы каждой такой команды.

Для вступления настроек в силу перезапускаем Apache:

sudo service apache2 restart

6.3 /etc/hosts

Последнее приготовление, нужно рассказать нашей системе, что адреса, указанные для виртуального хоста должны открываться локально. Редактируем файл /etc/hosts:

sudo gedit /etc/hosts

Добавим в конец строчки:

127.0.0.1   foundation.local
127.0.0.1   www.foundation.local

Готово! Проверяем, что все работает: http://foundation.local/example.html

7. Sublime Text 3

7.1 Настройки

Открываем Sublime Text 3 и правим настройки:

Preferences -> Setings -> User

{
    "auto_find_in_selection": true,
    "default_line_ending": "unix",
    "ensure_newline_at_eof_on_save": true,
    "fallback_encoding": "Cyrillic (Windows 1251)",
    "highlight_modified_tabs": true,
    "ignored_packages":
    [
        "Vintage"
    ],
    "match_brackets_angle": true,
    "rulers":
    [
        80,
        120
    ],
    "show_encoding": true,
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true
}

Проекты

Создаем папку под проекты

mkdir ~/Projects

Open Folder /var/www/kelnik-foundation

Save Project As сохраняем в Projects

Устанавливаем Package Manager (https://sublime.wbond.net/installation)

ctrl + ~

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Устанавливаем плагины

ctrl + shift + p install package

emmet

alignment

DocBlockr

javascriptnext -es6 syntax

Открываем js файл, View -> Syntax -> Open all with current extension as -> javascriptnext -es6 syntax -> javascript next