於 Ubuntu 17.10 架設 Laravel 5.2 + Vue.js 1.0 系統

動機：可否架設 Ubuntu 17.10 + Laravel 5.2 + Vue 1.0 來測試環境及學習操作?!

準備環境：
1.Server: 桌機PC(台式機)+ubuntu 17.10.1, Client: Windows10 筆電
2.Nginx 1.12.1 + MariaDB 10.1.30 + PHP 7.1.11(請自行安裝設定)

實作步驟：
1.依據 參攷1. 指示下載及安裝之...
$ sudo git clone https://github.com/Vuedo/vuedo.git
$ sudo cp .env.example .env
$ sudo composer install
$ sudo npm install
$ sudo php artisan key:generate

 2.新增資料庫及使用者，指令如下
$ mysql -u root -p
MariaDB [(none)]> CREATE DATABASE vuedo;
MariaDB [(none)]> CREATE USER 'homestead'@'localhost' IDENTIFIED BY 'secret';
MariaDB [(none)]> GRANT ALL PRIVILEGES ON vuedo.* TO 'homestead'@'localhost';
MariaDB [(none)]> FLUSH PRIVILEGES;
MariaDB [(none)]> quit
$ mysql -u homestead -psecret
MariaDB [(none)]> show databases;
可查見vuedo資料庫，如下
+--------------------+
| Database           |
+--------------------+
| homestead          |
| information_schema |
| vuedo              |
+--------------------+
MariaDB [(none)]> \q

3.修改 .env
$ sudo nano .env
DB_DATABASE=vuedo

4.接續安裝
$ sudo php artisan migrate
$ sudo php artisan db:seed
$ sudo npm install -g gulp
$ sudo gulp
$ sudo php artisan serve
$ sudo chown -R www-data:www-data .
$ sudo chmod -R a+w storage
$ sudo chmod -R a+w bootstrap/cache

5.在Server伺服器以瀏覽器Firefox測試網頁，畫面如下

如果修改了 JavaScript 或 CSS 文件記得運行 $ sudo gulp watch

6.為了讓其他的client能連上網頁，執行如下
設定 Nginx，指令如下
$ sudo nano /etc/nginx/sites-available/vuedo

檔案內容如下
server {
    listen 80;
    listen [::]:80;

     root /var/www/html/vuedo/public;
    index  index.php index.html index.htm;
    server_name  vuedo.com www.vuedo.com;

     location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

     location ~ \.php$ {
         try_files $uri = 404;
         fastcgi_split_path_info  ^(.+\.php)(/.+)$;
         fastcgi_index            index.php;
         fastcgi_pass             unix:/var/run/php/php7.1-fpm.sock;
         include                  fastcgi_params;
         fastcgi_param   PATH_INFO       $fastcgi_path_info;
         fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;
         fastcgi_intercept_errors on;
    }
}

設定 VirtualHost，指令如下
$ sudo ln -s /etc/nginx/sites-available/vuedo /etc/nginx/sites-enabled/

重啟 Nginx，指令如下
$ sudo systemctl restart nginx.service

修改Client端的 Windows hosts 檔案 ( 目錄: C:\Windows\System32\drivers\etc\hosts )
內容如下(IP設為 Server 的IP)
192.168.1.103 vuedo.com

20.在Client端打開瀏覽器Firefox，網址輸入 http://vuedo.com/，如下圖

後記：
(1)新增 Redis (參攷3.)
# apt-get update
# apt-get install build-essential tcl
# mkdir source
# cd source/
# wget http://download.redis.io/redis-stable.tar.gz
# tar xzf redis-stable.tar.gz 
# cd redis-stable/
# make
# make install
# make test
# mkdir -p /etc/redis
# cp redis.conf /etc/redis/
# nano /etc/redis/redis.conf 
# nano /etc/systemd/system/redis.service
# useradd -r -M redis
# mkdir /var/lib/redis
# chown redis:redis /var/lib/redis/
# chmod 770 /var/lib/redis/
# systemctl start redis
# systemctl enable redis
# apt-get install redis-tools
# redis-cli


參攷：
1.基于 Laravel 和 Vue.js 构建的博客平台 — Vuedo, http://laravelacademy.org/post/5271.html
2.Vuedo/vuedo, https://github.com/Vuedo/vuedo
3.How To Install and Configure Redis on Ubuntu 17.10, http://www.geekpills.com/operating-system/linux/install-configure-redis-ubuntu-17-10

留言

張貼留言