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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,682评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,277评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,083评论 0 355
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,763评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,785评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,624评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,358评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,261评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,722评论 1 315
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,900评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,030评论 1 350
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,737评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,360评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,941评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,057评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,237评论 3 371
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,976评论 2 355

推荐阅读更多精彩内容