web項目部署上線先後端及nginx跟服務器相關配置(Vue-cli3.0 + Laravel + nginx)

將項目部署上線不論是對前端仍是後端，都是一個必備的技能，最近買了個阿里的服務器搗鼓了下，在這裏記錄下我美好的生活。若是文章中有寫錯的地方或者哪裏能夠優化，請您在評論區留下寶貴的意見，固然若是有什麼不懂也能夠評論探討，嘻嘻，廢話很少說，讓咱們開啓美好的一天。

技術棧

• 前端：vue-cli 3.0
• 後端：php 的 Laravel
• 雲服務器： 阿里雲（ ubuntu ）
• 線上環境的web服務器 nginx

---

雲服務器（阿里雲Ubuntu）

購買服務器，認證，這裏就不作過多解釋了，不論是阿里仍是騰訊的服務器，相對應的文檔都寫得很詳細的，域名的申請和備案也是同樣（我這裏的域名就用www.test.cn代替），沒有域名也能夠用公網IP代替，這些實在不懂不會的就百度下，網上有不少相關的文章，咱們這裏主要談談和記錄下雲服務器環境的基本搭建和項目部署

一、雲服務器環境安裝及配置

1）SSH遠程鏈接雲服務器

# 在本地終端運行如下命令，登陸到雲服務器
$ ssh user@hostIP
複製代碼

user爲雲服務器用戶名，默認是root，@符號後面接雲服務器的公網IP地址。注意是公網IP，不要弄成內網IP,接着輸入密碼就能夠了

2）雲服務器環境配置

# 安裝 Vim
$ sudo apt-get install vim
# 安裝 Git
$ sudo apt-get install git

# 安裝zsh & oh my zsh
$ sudo apt-get install zsh
$ chsh -s /bin/zsh
# 配置密碼文件，解決chsh: PAM認證失敗的問題: 把第一行的/bin/bash改爲/bin/zsh，這個是root用戶的。
$ sudo vim /etc/passwd
$ sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

# 安裝 mysql
$ sudo apt-get install mysql-server
# 安裝 phpmyadmin
$ sudo apt-get install phpmyadmin
# 添加軟鏈接
$ sudo ln -s /usr/share/phpmyadmin /var/www/

# 安裝 php7.2
$ sudo apt-get install software-properties-common
$ sudo add-apt-repository ppa:ondrej/php
$ sudo apt-get update
$ sudo apt-get install -y php7.2
$ sudo apt-get -y  install php7.2-fpm php7.2-mysql php7.2-curl php7.2-json php7.2-mbstring php7.2-xml  php7.2-intl

# 安裝 composer 
$ wget https://getcomposer.org/composer.phar
$ mv composer.phar composer
$ chmod +x composer
$ sudo mv composer /usr/local/bin 

# 安裝nginx
$ sudo apt-get update
$ sudo apt-get install nginx

# 安裝 nodejs
$ sudo apt update
$ sudo apt install nodejs
$ sudo apt install npm 
# 使用n來管理node版本
sudo npm install -g n
# sudo n lts 長期支持
# sudo n stable 穩定版
# sudo n latest 最新版
# sudo n 8.4.0 直接指定版本下載

# 升級npm
sudo npm i -g npm
複製代碼

基本上須要用到的配置都在這裏，固然可能有一些記錄漏了，還有在安裝的過程當中可能會踩一些坑可是不打緊，有坑很正常的，注意細節並解決了

二、配置安全組規則（我這裏配置了我幾個經常使用的端口，大家能夠根據本身的須要去配置）

前端所需的工做

個人前端項目是用vue-cli 3.0框架寫的，無論你是用 react 仍是什麼寫的，原理都是差很少的，我這裏主要談談跟部署上線一些相關的配置

1）本地項目提交（pull）前的準備工做

# vue.config.js
module.exports = {
// 打包後的文件輸出路徑以及文件名相關設置
  publicPath: '/',
  outputDir: 'dist',
  lintOnSave: true,
  runtimeCompiler: true,

  chainWebpack: config => {
    /* 添加打包信息分析工具 */
    if (process.env.NODE_ENV === 'production') {
      if (process.env.npm_config_report) {
        config
          .plugin('webpack-bundle-analyzer')
          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
          .end()
        config.plugins.delete('prefetch')
      }
    }
  },
  
  devServer: {
    open: false,
    port: 8044,
    proxy: { // 方向代理
      '/api': {
        ws: false,
        target: 'http://www.myproject.cn',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
}
複製代碼

在上線以前首先要確保本地測試沒有問題，那麼這些webpack配置是必不可少的，都瞭解到上線這一步了，應該不用我多解釋了，真的不懂就百度下

本地測試一切都沒問題了，就開始打包, 並提交代碼。或者不打包直接提交，可是要在服務器打包，二者均可以，根據本身的愛好來就行了

npm run build
複製代碼

後端所需的工做

個人後端項目是用 PHP 的 Laravel 寫的（不論是用Java仍是其餘什麼的寫的後端，原理都是差很少的，觸類旁通便好），項目自己在本地開發時和前端聯調的時候基本上都配置好了，在這裏項目自己沒有太多須要配置的，主要是配置個數據庫可視化工具phpmyadmiin，和對應的nginx文件

1. 部署後端項目和配 nginx 文件（對應的端口是8089）

# 進入服務器
$  ssh user@hostIP
# cd /home/Code 跟本地是同樣的去install
$ git clone git地址
複製代碼

# sudo vim /etc/nginx/sites-available/youngp.conf 
server {
        # 端口
        listen 8089;
        # 項目路徑
        root /home/Code/youngp/public;
        # Add index.php to the list if you are using PHP
        index index.php index.html index.htm index.nginx-debian.html;
        server_name _;
        
        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ /index.php?$query_string;
        }
        
        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        location ~ \.php$ {
                include snippets/fastcgi-php.conf;
        #
        # # With php7.0-cgi alone:
        # fastcgi_pass 127.0.0.1:9000;
        # # With php7.0-fpm:
                fastcgi_pass unix:/run/php/php7.2-fpm.sock;
        }
}
複製代碼

添加 nginx 站點配置軟鏈接

# 這個youngp.conf能夠根據你的項目名去改
$ sudo ln -s /etc/nginx/sites-available/youngp.conf /etc/nginx/sites-enabled/youngp.conf
複製代碼

配置完成

# 重啓 nginx 服務器，而後在瀏覽器訪問,www.test.cn:8088，或者公網IP:8088
sudo /etc/init.d/nginx restart
複製代碼

2. 安裝 phpmyadmin 8088端口（若是剛剛在服務器配置的時候安裝了，就直接進入服務器配置nginx文件）

# 進入服務器
$  ssh user@hostIP
複製代碼

# 安裝 phpmyadmin
$ sudo apt-get install phpmyadmin
# 添加軟鏈接
$ sudo ln -s /usr/share/phpmyadmin /var/www/
複製代碼

# sudo vim /etc/nginx/sites-available/phpmyadmin.conf
server {
        # 端口
        listen 8088; 
        # 文件路徑
        root /var/www/phpmyadmin;
        # Add index.php to the list if you are using PHP
        index index.php index.html index.htm index.nginx-debian.html;
        server_name phpmyadmin;
        
        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ /index.php?$query_string;
        }
        
        location ~ \.php$ {
                include snippets/fastcgi-php.conf;
        #
        # # With php7.0-cgi alone:
        # fastcgi_pass 127.0.0.1:9000;
        # # With php7.0-fpm:
                fastcgi_pass unix:/run/php/php7.2-fpm.sock;
        }
}

複製代碼

添加 nginx 站點配置軟鏈接

sudo ln -s /etc/nginx/sites-available/phpmyadmin.conf /etc/nginx/sites-enabled/phpmyadmin.conf
複製代碼

配置完成

# 重啓 nginx 服務器，而後在瀏覽器訪問,www.test.cn:8088，或者公網IP:8088
sudo /etc/init.d/nginx restart
複製代碼

在 nginx 同個域名配置多個項目

到這裏基本上已是差很少，由於咱們是先後端是分離的，因此咱們須要在nginx同個域名配置多個項目

1 ）在雲服務器拉取前端代碼

# 進入服務器
$  ssh user@hostIP
複製代碼

# 我把前端的項目都放在了 /home/Code/ 這個目錄下
# 向本地同樣把各類包 install ，這些基礎不細談
$ git clone git地址
複製代碼

# 進入前端項目進行打包，打包好後會生成一個 dist文件
npm run build
複製代碼

我忘記是安裝nginx後自動生成的default文件仍是我本身手動建立的，可是不打緊，進入服務器看下，沒有就建立,有就直接修改

# 進入服務器
$ cd /etc/nginx/sites-available
$ sites-available ls
複製代碼

# 修改或者建立default文件
# sudo vim /etc/nginx/sites-available/default

server {
        listen 80;
        root /home/Code/項目名/dist;

        # Add index.php to the list if you are using PHP
        index index.php index.html index.htm index.nginx-debian.html;

        server_name www.test.cn;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ /index.html;
        }

        # youngp serve Reverse proxy
        location ^~ /api {
                proxy_pass     http://localhost:8089;
                proxy_set_header  Host       $host;
                proxy_set_header  X-Real-IP    $remote_addr;
                proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
        }


        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        location ~ \.php$ {
                include snippets/fastcgi-php.conf;
        #
        # # With php7.0-cgi alone:
        # fastcgi_pass 127.0.0.1:9000;
        # # With php7.0-fpm:
                fastcgi_pass unix:/run/php/php7.2-fpm.sock;
        }
}
複製代碼

這裏有兩步須要注意的地方，跟上面配置phpmyadmin和後端項目是有所不一樣的

將http://www.test.cn/api分發給後端，由於這些路徑基本上是後端接口

location ^~ /api {
        # 這個localhost:8089 就是剛剛配的nginx文件，他會指向後端項目
        proxy_pass     http://localhost:8089;
        proxy_set_header  Host       $host;
        proxy_set_header  X-Real-IP    $remote_addr;
        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
}
複製代碼

將http:// www.test.cn 分發給前端，爲了路徑美觀我在vue路由文件將mode設爲了history把路徑的#去掉了，可是這樣子存在一個問題就是，地址欄直接輸入路由是無效的，找不到，但本地是正常的。由於咱們的應用是個單頁客戶端應用，這時就須要在服務端增長一個覆蓋全部狀況的候選資源：若是 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面，想詳細連接能夠查看Vue Router文檔

location / {
        try_files $uri $uri/ /index.html;
}
複製代碼

到這裏基本上就配置好了，重啓服務器，接着訪問www.test.cn

$ sudo /etc/init.d/nginx restart
複製代碼

通過上面一通噼裏啪啦的搗鼓後, 沒出什麼報錯的話,看到這一幕基本上大功告成

以上是我本身的總結記錄，寫得不是特別細，可能有一些寫漏的或者寫錯了，望諒解，在評論區反饋給我