web项目部署上线前后端及nginx跟服务器相关配置(Vue-cli3.0 + Laravel + nginx)

3,669 阅读5分钟

将项目部署上线不管是对前端还是后端,都是一个必备的技能,最近买了个阿里的服务器捣鼓了下,在这里记录下我美好的生活。如果文章中有写错的地方或者哪里可以优化,请您在评论区留下宝贵的意见,当然如果有什么不懂也可以评论探讨,嘻嘻,废话不多说,让我们开启美好的一天。

技术栈

  • 前端:vue-cli 3.0
  • 后端:php 的 Laravel
  • 云服务器: 阿里云( ubuntu )
  • 线上环境的web服务器 nginx

云服务器(阿里云Ubuntu)

购买服务器,认证,这里就不做过多解释了,不管是阿里还是腾讯的服务器,相对应的文档都写得很详细的,域名的申请和备案也是一样(我这里的域名就用www.test.cn代替),没有域名也可以用公网IP代替,这些实在不懂不会的就百度下,网上有很多相关的文章,我们这里主要谈谈和记录下云服务器环境的基本搭建和项目部署

1、云服务器环境安装及配置

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
$ sudo apt-get install curl
$ sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/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

基本上需要用到的配置都在这里,当然可能有一些记录漏了,还有在安装的过程中可能会踩一些坑但是不打紧,有坑很正常的,注意细节并解决了

2、配置安全组规则(我这里配置了我几个常用的端口,你们可以根据自己的需要去配置)

前端所需的工作

我的前端项目是用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

  1. 安装 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

经过上面一通噼里啪啦的捣鼓后, 没出什么报错的话,看到这一幕基本上大功告成

以上是我自己的总结记录,写得不是特别细,可能有一些写漏的或者写错了,望谅解,在评论区反馈给我