Linux上通过Nginx来部署vue项目

1、首先可以通过finallshell这个软件连上自己的服务器

2、配置nginx安装所需的环境

yum install gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel

3、下载linux版本的Nginx,我下的是Nginx 1.16.1版本的
链接:https://nginx.org/en/download.html

图片.png

4、将刚才下载的压缩包上传到linux服务器上

cd /usr/src我是在/usr下的src目录下创建一个Nginx文件夹,然后把刚才的压缩包上传到这个文件夹下(直接右键上传)

解压这个压缩包,解压的命令是 
tar -zxvf  nginx-1.16.1.tar.gz         (换个版本号)

5、安装Nginx

上步解压安装包后,cd进入解压后的文件,先输入./config 然后再输入命令 make&&make install ,进行编译和安装

6、查看是否安装成功,启动Nginx

一般是默认安装在  /usr/local/nginx目录下的,而我们启动进入这个目录下的sbin文件,执行脚本的

1、进入 nginx 安装目录下的sbin目录
命令:cd /usr/local/nginx/sbin (默认 /usr/local/nginx/sbin)

2、启动nginx
命令:   ./nginx

3、查看 nginx 进程:
命令:   ps -ef | grep nginx

4、浏览器输入:127.0.0.1就可以打开nginx的默认首页了(也可以输入自己服务器的ip地址,也能打开,端口号在config文件中)

5、关闭nginx
命令:  ./nginx -s stop   此时127.0.0.1界面就是无法访问了

6、重启nginx
命令:  ./nginx -s reload

注意:上面这些命令都是要在 /usr/local/nginx/sbin 这个目录中执行的
出现这三行说明nginx进程已经启动、正在运行.png

7、打包vue项目

打包命令:npm run build  会生成一个dist文件夹
注意:vue项目打包的时候,是不会把vue.config文件给打包进去的,也就是说打包后的vue项目中配置的代理是不起作用了
(需要在nginx上配置跨域,做法也就是把vue.config中的配置代理的那些步骤,复制一份到nginx的配置文件中,但是需要略作修改)

8、上传dist文件夹中的两个文件

把打包的dist文件夹上传到服务器上的nginx中,此时上传的地方是 /usr/local/html 目录下,而在这个目录下是已经存在一个
index.html文件了,这个文件就是刚才访问127.0.0.1时看到的界面,现在这两个文件删掉,把打包的dist文件中的index.html和
static文件夹上传到此处
注意:这是在不修改nginx默认访问文件是index.html的情况下可以这么做,一般情况也不会动这个配置项的

9、修改nginx配置,转发代理

进入 cd /usr/local/nginx/conf 目录可修改nginx的配置文件:
http可以包含多个http服务,一个server配置一个独立的站点。
一个http可以有多个server,一个server可以有多个location匹配资源路径
图片.png
图片.png

图片.png

相关链接:
https://blog.csdn.net/weixin_42585386/article/details/122215776
https://blog.csdn.net/weixin_36755535/article/details/110185316
https://blog.csdn.net/zzddada/article/details/110928669
https://blog.csdn.net/qq_46323758/article/details/116351553
https://segmentfault.com/a/1190000038672615 ---配置多个vue项目
https://blog.csdn.net/ksrtyl/article/details/107084866
https://blog.csdn.net/JKjiang123/article/details/103064819?spm=1001.2014.3001.5501
https://cloud.tencent.com/developer/article/1654844
https://blog.csdn.net/qq_25460159/article/details/116225163 nginx下载安装

https://blog.csdn.net/qq_25460159/article/details/112947177?spm=1001.2014.3001.5501 使用nginx部署多个前端项目(三种方式)

https://blog.csdn.net/qq_29678299/article/details/107160509?spm=1001.2014.3001.5501
nginx部署多个vue项目的2种方法

nohup java -jar jar包名 &
ps -ef |grep java
kill 端口号
lsof -n / |grep deleted 查看已删除空间却没有释放的进程

在替换新jar包的时候,先杀死旧的进程,然后再替换,不然就会造成旧jar包的进程一直在运行,这种就相当于是删除了快捷方式,而真正的程序并没有被删掉

如果nginx启动时提示没有nginx.pid,可以先杀死nginx进程,重新启动看看
ps -ef |grep nginx
kill 端口号

如果nginx配置改乱了,在nginx的config目录下还有个nginx.confg.default文件,这是默认备份的最初始的配置文件,只需要改个名字就能能用了(改名前需要再备份一下)

1、想要同时配置多个前端项目,做法就是多写几个server,server中换一个端口监听,转发依旧是location来配置转发,
    (因为前后端都是部署在一个服务器上的,所以转发地址就是服务器的地址了),
2、location / {
        //  root   html    // 在nginx的安装目录下有个html文件夹,这个就代表是根目录,打包的文件就放在这个文件夹中,
        // 假设部署了两个前端项目,都同时放在html文件夹中的话,比如一个项目是one,一个是two,那么里面该这么写
          root   html/two    // 因为是两个项目,所以在另一个server中的配置中 这么写:root   html/one
          index  index.html  index.htm;      // 这个默认就行,表示前端页面从这个文件开始访问
   }

usr/local/nginx/sbin
传输文件
scp dist.zip 10.128.13.62:8000/usr/local/nginx/html

新增:
假设配置文件中的listen:5000
意思就是监听5000端口,即网页访问的端口是5000
http:///www.localhost:5000.com
http:www.127.0.0.1:5000.com
就是网页访问的端口号,网页默认的端口号是80,如果没有改默认的端口号,怎可以忽略不写

nginx中可以写多个server,监听多个网页

nginx配置中的http属性中可以配置 转发的数据量上限
http{
client_max_body_size 1024m
}
nginx配置中被注释的一行 user 可以配置指定用户访问nginx
worker_processes 1;
user nginx nginx; # 指定Nginx服务的用户和用户组

https://blog.csdn.net/guo_qiangqiang/article/details/107592269

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容