将项目部署上线不管是对前端还是后端,都是一个必备的技能,最近买了个阿里的服务器捣鼓了下,在这里记录下我美好的生活。如果文章中有写错的地方或者哪里可以优化,请您在评论区留下宝贵的意见,当然如果有什么不懂也可以评论探讨,嘻嘻,废话不多说,让我们开启美好的一天。
技术栈
- 前端: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文件
- 部署后端项目和配 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
- 安装 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
经过上面一通噼里啪啦的捣鼓后, 没出什么报错的话,看到这一幕基本上大功告成
以上是我自己的总结记录,写得不是特别细,可能有一些写漏的或者写错了,望谅解,在评论区反馈给我