linux部署前端页面(实战)

Linux基本命令(学习笔记)零基础入门linux系统运维_linux find exec rm_Z_Xshan的博客-CSDN博客

如果linux不熟可以看我之前写的入门教程 感谢支持!!

一、服务器

这里去购买云服务器,如果是练习可以用虚拟机,这里不过多描述

二、下载nginx

nginx: download   nginx官网下载地址

wget http://nginx.org/download/nginx-1.24.0.tar.gz

下载完成之后我们可以看到是个压缩文件,我们通过ls进行查看

 

对此进行解压 

tar -zxvf nginx-1.24.0.tar.gz

 配置nginx 

cd 你解压完的目录  我这里的是nginx-1.24 你们根据你们下载的文件命进入即可

cd nginx-1.24

我们可以看到configure文件

linux部署前端页面(实战)_第1张图片

 执行下面命令

./configure

配置完成!

 linux部署前端页面(实战)_第2张图片

编译安装 

 这个命令会安装到默认路径usr/local/nginx,可以通过查看nginx安装路径下面有说

make&make install

 但是我没有权限只能安装到自己的指定路径(T*T)

//创建目标文件夹
mkdir -p /usr/mydir/nginx
cd /tmp/nginx-1.13.7
//关键所在:因为默认会安装在/usr/local/nginx,所以此处需要指明目的文件夹
./configure --prefix=/usr/mydir/nginx   //(这个文件名字自己命名)
make && make install

显示directory就是安装成功了!! 

 linux部署前端页面(实战)_第3张图片

此时在/usr/mydir/nginx下将会生成conf、sbin等文件夹 

三、启动nginx

查看nginx安装路径

whereis nginx

启动服务命令

/usr/mydir/nginx/sbin/nginx  -s reload

 启动有可能会报 > nginx: [error] open() /usr/mydir/nginx/logs/nginx.pid" failed (2: No such file or directory)

解决办法

使用nginx -c的参数指定nginx.conf文件的位置

/usr/mydir/nginx/sbin/nginx -c /usr/mydir/nginx/conf/nginx.conf

 我这里报错

[emerg] bind() to 0.0.0.0:80 failed (13: Permission denied)

意思是没有端口低于1024没有权限 

1、进入nginx.conf文件

2、修改listen后的默认端口号改为想改的端口号(如下图)把90改成1024以上就好了

linux部署前端页面(实战)_第4张图片

访问ip成功启动! 

 linux部署前端页面(实战)_第5张图片

重启服务命令

 systemctl restart nginx.service

如果权限不够加上sodu (你要有root的账号密码)

sudo systemctl restart nginx.service

查看nginx是否启动

ps -ef | grep nginx

 四、打包前端并上传linux

打包

前端打包不多说了,看你们自己项目的打包命令就可以,一般都是

npm run build

工具 

 使用工具上传文件,工具有很多这里我用到的是WinSCP

 打包好的文件一定要放在nginx/html里面!!!!

linux部署前端页面(实战)_第6张图片

解压zip文件  

要将Linux中的zip文件解压到当前目录

unzip dist.zip

修改文件权限 

修改文件的权限避免出现不能访问的情况

chmod [权限模式] [文件或目录]

我们修改为最高权限

chmod 777 [文件或目录]

文件夹里所有的文件也要修改

cd [文件或目录]
chmod 777 *

 五、修改nginx配置 经行nigx转发

找到\conf\nginx.config文件用vim打开文件

 server {
        listen       8080;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;

		 location / {
            root html/文件夹(打包好在nginx/html里的文件);     //你文件的路径
            index index.html index.htm;
            try_files $uri $uri/ @router;
        }

}

 重启nginx

如果你有高权限执行下面命令

sudo service nginx restart

没有就杀死进程 ,重新启动

killall nginx  //杀死进程

启动

linux部署前端页面(实战)_第7张图片

你可能感兴趣的:(linux,前端)