nginx部署vue项目

将vue项目部署到linux上，用nginx代理

---

小白第一次博客，如有内容写的不好见谅(⊙︿⊙)

1、首先环境搭建

1. 我的是Ubuntu16(vmware)，linux安装、nodejs安装
   • 安装nginx，终端输入
     • sudo apt-get update
     • sudo apt-get install nginx
       不想每次都输sudo可以切换为root用户 输入su再输入密码就切换root了，换回来用 exit
       
     • 安装好后文件结构大致为：

     1. 所有的配置文件都在/etc/nginx下，并且每个虚拟主机已经安排 了/etc/nginx/sites-available下
        

     2. 程序文件在/usr/sbin/nginx

     3. 日志放在了/var/log/nginx中并已经在/etc/init.d/下创建了启动脚本nginx
        

     4. 默认的虚拟主机的目录设置在了/var/www/nginx-default
        具体参考ununtu安装nginx

   • 启动nginx
     • service nginx start
   • 停止nginx
     • service nginx stop
2. 启动后访问http://localhost/，看到这页面说明成功了！
   

2、前期相关文件准备

1. 使用vscode开发vue项目，终端运行npm run build
   

   • 可以看到目录下多了个dist文件
     

   • 将其打包拖入虚拟机中并解压
     需要安装vmtools工具
     

   

2. 后端idea打开springboot项目
   执行clean和package
   

   可以在项目的target目录下看到打包好的jar包
   

   这边我把数据库db文件放在了springboot项目的resource路径下
   

   数据库采用的是sqlite
   

   同样放入虚拟机中

3、部署项目

1. 切换到nginx配置目录(记得切root用户)

   • cd /etc/nginx/sites-available
     

   其下有个配置文件，使用vim编辑

   • vim default 没有安装vim的请自行安装 linux安装vim
     

   root /home/hahaha/vue/dist;记得改这个dist目录
   location /bookstore是因为我的springboot项目有个主路径
   
   其他照抄

2. 接着我们安装jdk环境

   • 更新软件包
     sudo apt-get update
sudo apt-get install openjdk-8-jdk

   • 查看是否安装
     java -version
     

   • 运行jar包
     nohup java -jar bookstore-0.0.1-SNAPSHOT.jar >/home/hahaha/vue/data/log.log 2>/home/hahaha/vue/data/err.log &
     表示日志内容会放入/home/hahaha/vue/data目录下，后面的&表示会在后台执行

3. 接着我们重启nginx，因为修改了配置文件
   service nginx restart
   重新访问地址，就会发现变成了我们的项目啦！