vue前端使用Nginx部署到服务器

头一次做这个事情，毫无头绪，总结一下自己走过的路，以后遇到就能用啦~
背景：ubuntu的linux系统，要把本地项目部署到公司的192.168.XX.XX服务器上。
基本经过的步骤有

1. ssh远程连接服务器
2. nginx配置
3. scp远程拷贝本地项目到服务器

具体指令

一、ssh

1. 安装ssh-server sudo apt-get install openssh-server

2. 安装ssh-client sudo apt-get install openssh-client

3. 确认sshserver是否安装好 ps -e | grep sshd
   如果出现类似
   450 ? 00:00:00 sshd
   这样的sshd说明ssh-server已经启动了

4. 另外：一些ssh的命令
   ssh启动sudo /etc/init.d/ssh start
   ssh停止sudo /etc/init.d/ssh stop
   ssh重启sudo /etc/init.d/ssh restart
   修改 ssh服务配置文件vi /etc/ssh/sshd_config

5. 接第3步
   ssh安装成功后使用指令用用户名密码登录服务器ssh root@192.168.XX.XX
   之后系统会让输入密码，正确输入后即登陆成功。

二、nginx

1. 在服务器账户登录下安装nginx
   查询是否有nginx nginx -v，若有，会显示版本号，若无，会显示找不到
   若想彻底卸载之前的nginx apt-get --purge autoremove nginx

2. 安装依赖包

apt-get install gcc
apt-get install libpcre3 libpcre3-dev
apt-get install zlib1g zlib1g-dev
# Ubuntu14.04的仓库中没有发现openssl-dev，由下面openssl和libssl-dev替代
#apt-get install openssl openssl-dev
sudo apt-get install openssl 
sudo apt-get install libssl-dev

！用apt install nginx可以直接下载，比下面的压缩包下载方式方便，跳过3的安装及配置看4！！

3. 安装nginx（用压缩包安装，找到了更便捷的方法【下面的4.】，但是这里有些指令还有用，就不删了）

cd /usr/local
mkdir nginx //创建了nginx文件夹
cd nginx
wget http://nginx.org/download/nginx-1.13.7.tar.gz
tar -xvf nginx-1.13.7.tar.gz 

编译nginx

# 进入nginx目录
/usr/local/nginx/nginx-1.13.7
# 执行命令
./configure
# 执行make命令
make
# 执行make install命令
make install

启动nginx

#进入nginx启动目录
cd /usr/local/nginx/sbin
# 启动nginx
./nginx

访问nginx
网页输入ip地址，访问成功，到此，nginx安装完毕，展示页面为下面

nginx配置文件修改

#进入conf文件夹
cd /usr/local/nginx/conf

nginx.conf文件就是配置文件 一篇讲解配置文件的文章：nginx默认的配置文件详解

#编辑配置文件
vim nginx.conf

在这里修改端口号listen 及显示的网址sever_name

在这里把root改为自己的上传的项目路径（上传是用scp远程拷贝在下面第三块scp里）

项目路径可以用指令进入放置打包文件dist的文件夹然后用pwd查看路径，复制过来。
在项目打包上传好，修改好端口及ip后重启nginx就能在ip+端口的网址看到项目的页面了。

cd /usr/local/nginx/sbin
./nginx -s reload #重新启动nginx

4.apt的方式安装nginx

• 在/usr/sbin目录下安装apt install nginx
• 在/usr/sbin目录下运行nginx./nginx
• 这样下载的nginx的配置文件在etc环境变量文件夹中，cd /etc/nginx进入，下面的sites-available，sites-enabled就是配置文件的地方。
• cd sites-enabled进入后有一个默认的default配置文件，使用指令cp default 自定义项目名.conf拷贝默认文件来创建自己对应项目的配置文件。
• vi 前面自定义的文件名.conf编辑配置文件，修改端口及文件路径（为打包的项目在服务器中存放的路径，用的是下面【三、】中的scp）。

• 最后重启nginx服务cd /usr/sbin，./nginx -s reload

三、scp

部署项目之前需要打包vue项目npm run build生成dist文件夹
远程拷贝本地项目的打包项到服务器scp的一些指令
用到的远程拷贝scp -r /path/filename username@servername:/path
步骤：
1.装完nginx后退出服务器登录exit
2.在本地执行scp操作scp -r /path/filename username@servername:/path
例如：scp -r /home/XXX/dist root@192.168.XX.XX:/usr/local/lib
复制过去的文件夹名字还是dist，可以修改为项目名字mv oldname newname
3.再次用ssh进入服务器账户，修改nginx项目路径（二、中路径修改部分），重启nginx。

常用指令补充

• 配置 nginx 常用命令：
  查看配置：vi /usr/local/nginx/conf/nginx.conf
  编辑配置：vim /usr/local/nginx/conf/nginx.conf
  重启配置：/usr/local/nginx/sbin/nginx -s reload
  重启服务：/usr/local/nginx/sbin/nginx -s reopen
  查看开启的nginx进程：ps aux | grep nginx
  强制关掉之前打开的进程：kill -9 31764 31765
  
• 运行./nginx开启nginx时提示端口已经被占用
  nginx: [emerg] bind() to 0.0.0.0:3090 failed (98: Address already in use)
  可以用sudo lsof -i tcp:3090查看是什么程序占用了端口，如果不是有用的应用或者程序，可以关掉kill PIDPID为图中的，可以同时清理多个。或者可以换个端口用。
  
• Linux重启服务器指令
• 项目已经部署到linux 服务器，却访问不了
• Linux下项目tomcat部署成功，但是访问不到的问题