【运维】Linux安装Nginx并部署前端项目【内/外网-保姆级教程】

       

目录

准备nginx安装包并解压

1下载所需要的安装包

2安装步骤

2.1将下载的完整文件夹通过压缩包的形式,上传到你的路径下解压.

2.2 进入到gcc文件夹下,执行命令:

2.3进入到gcc-c++文件夹下,执行命令:

2.4检查gcc、gcc-c++是否安装成功

2.5执行gcc -v , g++ -v 出现带有success或版本信息代表安装成功;

2.6安装PCRE:

2.7安装libtool

 2.8安装nginx

3如何进行操作

3.1进入到linux服务器切换到root用户

3.2直接进入到nginx默认安装的位置

3.3ngin文件内容解释

3.4如何部署前端项目到Nginx上

3.5上传dist.tar压缩包

3.6解压dist.tar文件

3.7解压成功后使用cd 切换到conf文件下

3.8根据实际情况修改nginx.conf中的配置文件

3.9启动Nginx

3.10查看是否启动成功

3.11访问部署的前端项目

3.12Nginx相关命令


         因为公司需要内网进行部署前后端,不能联网进行下载就很麻烦,所以今天我就给大家分享一下如何在内网进行部署前端Vue项目。

注意:最好提前切换到root用户,这样权限比较大。此方法只适用于cpu为x86系统

使用下面命令可以查看Linux系统的CPU信息

uname -a

准备nginx安装包并解压

1下载所需要的安装包


下载链接

2安装步骤

2.1将下载的完整文件夹通过压缩包的形式,上传到你的路径下解压.

2.2 进入到gcc文件夹下,执行命令:

rpm -Uvh *.rpm --nodeps --force

2.3进入到gcc-c++文件夹下,执行命令:

rpm -Uvh *.rpm --nodeps --force

2.4检查gcc、gcc-c++是否安装成功

2.5执行gcc -v , g++ -v 出现带有success或版本信息代表安装成功;

2.6安装PCRE:

//1.解压对应文件
tar -zxvf pcre-8.35.tar.gz
//2.进入对应文件夹
cd pcre-8.35
//3.执行命令:依次执行
./configure
make
make install

2.7安装libtool

//1.解压对应文件
tar -zxvf libtool-2.4.2.tar.gz
//2.进入对应文件夹
cd libtool-2.4.2
//3.执行命令:依次执行
./configure
make
make install

 2.8安装nginx

//1.解压对应文件
tar -zxvf nginx-1.13.9.tar.gz
//2.进入对应文件夹
cd nginx-1.13.9
//3.执行命令:依次执行
./configure
make
make install

3如何进行操作

3.1进入到linux服务器切换到root用户

su root 有密码就输入密码,没密码就直接进行操作。(不是管理员不能对nginx配置文件进行操作和相关文件的删除等操作)

3.2直接进入到nginx默认安装的位置

cd /usr/local/nginx

3.3ngin文件内容解释

进入到nginx下包含下图所显示的文件,我们进行前端部署主要是去操作conf(配置文件),html(放前端打包的dist文件),sbin(启动nginx)

3.4如何部署前端项目到Nginx上

        如何将前端的dist文件放置到nginx的html文件下,首先要注意nginx默认可以解压tar后缀的压缩包,所以你在外部需要打包成tar压缩包,如果你想打包成其他后缀的压缩包也行,但是需要安装解压的插件,但内网不是不能联网下载吗?建议使用7ZIP直接打包成tar压缩包。

然后

cd html

进入到html目录下,默认是包含两个html文件的。

3.5上传dist.tar压缩包

使用rz 命令,直接输入rz进行上传dist.tar文件。(rz -y命令会直接覆盖掉上传的同名的文件)

3.6解压dist.tar文件

直接使用tar -xvf dist.tar 进行解压

3.7解压成功后使用cd 切换到conf文件下

3.8根据实际情况修改nginx.conf中的配置文件

3.9启动Nginx

切换到sbin目录下执行

./nginx

3.10查看是否启动成功

执行

netstat -tpln或ps -ef|grep nginx

查看是否成功启动

3.11访问部署的前端项目

直接输入 linux的ip:nginx监听的端口号进行访问

例如

127.0.0.1:3000

结束。

3.12Nginx相关命令

使用nginx操作命令前提:必须进入到nginx的自动生成目录的下/sbin文件夹下

1安装自动生成的目录:

/usr/local/nginx/

2查看 nginx 的版本号

./nginx -v

3.关闭nginx

./nginx -s stop

4.重新加载 nginx

在目录:/usr/local/nginx/sbin 下执行命令,不需要重启服务器,自动编译。

./nginx -s reload
  • 12
    点赞
  • 60
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
部署前端项目之前,您需要先安装和配置Nginx。以下是一些步骤供您参考: 1. 首先,您需要下载Nginx的源文件并解压缩。您可以将源文件放在/u01/micsdev/software目录下,然后使用以下命令解压缩文件: ``` cd /u01/micsdev/software tar zxvf nginx-1.15.10.tar.gz ``` 2. 进入解压后的Nginx目录: ``` cd /u01/micsdev/software/nginx-1.15.10 ``` 3. 运行配置命令,指定Nginx安装路径和一些可选的模块: ``` ./configure --prefix=/software/nginx --without-http_rewrite_module --without-http_gzip_module ``` 4. 编译Nginx: ``` make ``` 5. 安装Nginx: ``` make install ``` 6. 删除源文件(可选): ``` rm -rf /u01/micsdev/software/nginx-1.15.10 ``` 7. 创建Nginx的启动脚本并添加配置: ``` sudo vi /etc/init.d/nginx ``` 在脚本中添加以下内容: ``` #!/bin/sh # nginx - this script starts and stops the nginx daemon chkconfig: - 85 15 description: NGINX is an HTTP(S) server, HTTP(S) reverse proxy and IMAP/POP3 proxy server processname: nginx config: /etc/nginx/nginx.conf config: /etc/sysconfig/nginx pidfile: /var/run/nginx.pid Source function library. case "$1" in start) rh_status_q && exit 0 $1 ;; stop) rh_status_q || exit 0 $1 ;; restart|configtest) $1 ;; reload) rh_status_q || exit 7 $1 ;; force-reload) force_reload ;; status) rh_status ;; condrestart|try-restart) rh_status_q || exit 0 ;; *) echo $"Usage: $0 {start|stop|status|restart|condrestart|try-restart|reload|force-reload|configtest}" exit 2 esac chmod a+x /etc/init.d/nginx ``` 8. 更改Nginx的默认站点配置: ``` vi /software/nginx/conf/nginx.conf ``` 9. 启动Nginx服务: ``` service nginx start ``` 10. 停止Nginx服务: ``` service nginx stop ``` 11. 重启Nginx服务: ``` systemctl restart nginx.service ``` 这些步骤将帮助您在Linux部署前端项目使用Nginx。请根据您的实际情况进行相应的调整。 #### 引用[.reference_title] - *1* *2* *3* [Linux配置nginx服务器,用于部署前端项目](https://blog.csdn.net/qq_40823910/article/details/89192404)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mxin5

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值