手把手教你从0-1超详细教你实现前端代码nginx部署全流程

tangdou369098655
1,710 阅读2分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。 @TOC

说明

  • 本文旨在使用最简单快速的办法，解决前端静态资源部署需求。
  • 公司平时使用 tomcat 部署静态资源比较多，今年三月份我买了一个服务器，一直忙着加班还没开始用，今天刚好拿来用一下咯：

前提

你要有一个服务器哟~~ 购买后打开就像这个下面这个样子

在这里插入图片描述

步骤一：链接服务器

  1. 找到公网IP 在这里插入图片描述
  2. 修改密码 在这里插入图片描述
  3. 下载FinalShell，安装打开 在这里插入图片描述
  4. 打开FinalShell 在这里插入图片描述 在这里插入图片描述 名称可以随意填写哦~~ 自己起个服务器的名字，方便以后链接使用。 在这里插入图片描述
  5. 双击打开，链接成功 在这里插入图片描述 在这里插入图片描述

步骤二：安装Nginx

  1. 下载nginx压缩包； 点我下载nginx 在这里插入图片描述 在这里插入图片描述
  2. 找到需要安装的路径，把刚刚下载的压缩包拖进去； 在这里插入图片描述 在这里插入图片描述

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 3. 解压文件，刷新目录

 tar -zxvf nginx-1.18.0.tar.gz

在这里插入图片描述 在这里插入图片描述 4. 安装依赖

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

在这里插入图片描述 5. 进入目录，执行命令

cd nginx-1.18.0
 
./configure
 
make install

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 6.配置nginx.conf 此项可以根据需求进行操作，也可以不配置，使用默认端口号.

# 打开配置文件
vi /usr/local/nginx/conf/nginx.conf

在这里插入图片描述 在这里插入图片描述 按住下箭头，往下寻找端口号，修改端口号

在这里插入图片描述

Linux下编辑文件并保存

  1. cd到该文件的目录下
  2. vi 要编辑的文件名，进入普通模式，可查看文件内容
  3. 输入 i 进入编辑模式，开始编辑文本
  4. 编辑之后，按ESC退出到普通模式。
  5. 在普通模式下，输入 : 进入命令模式
  6. 在命令模式下输入wq, 即可保存并退出

在这里插入图片描述 7.启动nginx

/usr/local/nginx/sbin/nginx -s reload

在这里插入图片描述

8.查看nginx进程是否启动

ps -ef | grep nginx

备注：如果启动不成功，查看的时候下面就只有一条 我们可以使用这个来启动 启动nginx ./usr/local/nginx/sbin/nginx 而不是使用reload

在这里插入图片描述

步骤三：测试

  1. 进入服务器管理界面，配置安全组； 在这里插入图片描述
  2. 测试界面访问 在这里插入图片描述 在这里插入图片描述

步骤四：部署其他项目

  1. 进入服务器静态资源目录，拖动打包好的项目放入； 目录地址：/usr/local/nginx/html

在这里插入图片描述 2. 访问 在这里插入图片描述

结语

本教程旨在快速完成项目部署，其他配置项问题没有列举出来哦...后期有空会增加配置文章哟~~ 欢迎大家指出文章需要改正之处~
如果有更好的方法，欢迎大家提出来，共同进步哟~~

avatar
文章
阅读
粉丝