就在前两天,有新人通过邮箱问到笔者,如何部署自己的web前端项目?笔者在此详细介绍。


一、购买云服务器

  配置用户名密码、安全组

二、下载Xshell于Xftp工具

  用于登录服务器和文件上传

三、在linux机器上安装并配置nginx

  见下文

四、在相关目录放置自己的项目

  见下文

让我们一个一个来说,购买服务器与工具下载就不细说了,做完以后运行Xshell工具,新建一个连接如下图:

 如下图,出现如下字样证明连接成功:

 接下来是重头戏,该安装nginx了,

1:下载nginx压缩包
可以直接去官网下载,页可以直接使用wget命令下载,指令如下:

wget -c https://nginx.org/download/nginx-1.20.2.tar.gz

2:安装nginx依赖的环境

安装编译nginx的依赖的gcc、

安装Nginx的Rewrite模块和HTTP核心模块会使用到PCRE正则表达式语法(pcre负责提供编译版本的库、pcre-devel负责提供开发阶段的头文件和编译项目的源代码)、

安装zlib库提供了gzip压缩算法、

安装Open SSL(nginx不仅支持 http协议,还支持 https(即在 ssl 协议上传输 http),如果使用了 https,需要安装 OpenSSL 库)、

yum install gcc-c++

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

3、解压nginx压缩包并安装

tar -zxvf nginx-1.20.2.tar.gz

4、进入nginx的安装包路径

cd nginx-1.20.2

5、执行默认配置(根据自身情况而定)

//不需支持https
./configure

//需要支持https
./configure --with-http_ssl_module

6、编译ngnix

make

7、安装nginx

make install

8、寻找nginx启动目录(寻找nginx文件夹)

//返回上一层
cd ..

//查看文件列表
ll

9、启动nginx

//进入nginx文件夹
cd /usr/local/nginx/sbin

//启动nginx
./nginx

10、访问公网ip,有页面则证明nginx启动成功

11、附录nginx其他操作(不用管)

//关闭nginx
./nginx -s quit || ./nginx -s stop

//重启nginx
./nginx -s reload

//验证是否配置正确
nginx -t

//查看版本号
nginx -v || nginx -V
//查看nginx进程 ps aux|grep nginx //设置开机自启 vim /etc/rc.local 在弹窗底部增加/usr/local/nginx/sbin/nginx

12、启动Xftp将前端项目上传到对应目录(如需更改存放目录请自行配置nginx.config文件)

 13、验证(浏览器打开公网IP,发现已经部署上去了)

标签智能推荐:

Servlet

ache-tomcat-8.5.65\bin\tomcat-juli.jar"2.工作空间项目 和 tomcat部署的web项目tomcat真正访问的是 "tomcat部署的web项目","tomcat部署的web项目"对应着"工作空间项目"的web目录下的所有资源;    WEB-INF目录下的资源,不能被浏览器直接访问;3.

OpenIM在线跑通Demo(web

s://自己的服务器地址:10001"//客户端本地占用端口exportconstsdkWsPort="7788"5:开始调试,此处注意默认的端口都是30000,SDK默认的端口(默认7788)Web默认运行端口为3000npmrunstart:rendererElectronSDK本地需要占用一个端口(默认7788)npmrunstart:main6:打包部署Web打包生成文件在项目根目录bui

基于node.js实现前端web项目自动化部署

前言前端项目部署时,nginx配置完成后,只需将打包后的文件上传至服务器指定目录下便可。 前端通常使用如下方式完成:nodexshell等命令行工具上传ftp/sftp等可视化工具上传jenkins等自动化部署服务对于简单前端项目,频繁部署时,xshell、ftp两种方式较为繁琐,而jenkins等自动化部署服务须要提早安装软件、并熟悉配置流程。所以但愿借助本地node服务实现对前端打包

初识tomcat和servlet

速度快web服务器软件:服务器:安装了服务器软件的计算机服务器软件:接收用户的请求,处理请求,做出响应web服务器软件:接收用户的请求,处理请求,做出响应。在web服务器软件中,可以部署web项目,让用户通过浏览器来访问这些项目常见的java相关的web服务器软件:webLogic:oracle公司,大型的JavaEE服务器,支持所有的JavaEE规范,收费的。webSphere:IBM公司,大型

分享:web前端学习资源清单(持续更新)

如何优化如何实现高性能的在线PDF预览前端微服务qiankun(qiankun是一个基于single-spa的微前端实现库)【官网】基于qiankun的微前端最佳实践(万字长文)-从0到1篇记一次微前端qiankun项目实践!!!防踩坑指南目标是最完善的微前端解决方案-qiankun2.0qiankun微前端实战看这篇就够了-Vue项目篇(入门参考)- github示例地址云音乐大前端团

3.7 资源定位

的一个重要功能是将静态资源缓存到离用户距离近的CDN节点上CDN实现的前提,将静态资源部署到已经接入CDN解析服务的专属服务器上独立域名的静态资源请求不会携带主页面的cookie等数据,加快网络访问对服务器端渲染html,html和后端文件要一同部署,部署html时要将静态资源的引用改为CDN服务器的地址。数量少可以手动改,数量多可以使用模版引擎。静态资源使用增量更新策略,每次迭代都会增加hash

Swagger介绍和集成

时代:前端只用管理静态页面;html==>后端,模板引擎JSP==>后端是主力前后端分离时代:后端:后端控制层,服务层service,数据访问层前端:前端控制层,视图层伪造后端数据,json,已经存在,不需要后端,前端工程依旧能够跑前后端如何交互?==>API前后端相对独立,松耦合;前后端甚至可以部署在不同的服务器上产生一个问题:前后端集成联调,前端人员和后端人员无法做到即时协商

2022 年 50 个最酷网络和移动项目创意(三)

别的项目!把自己推到极限,看看你是否可以构建一个真正先进的人工智能考虑到它有多复杂,大多数人会首先选择一个简单的聊天机器人。如果你能想办法制造一个可以通过图灵测试的人工智能。那么恭喜你可能会获得诺贝尔奖。仅供参考:图灵测试,最初由艾伦·图灵在1950年称为模仿游戏,是对机器表现出与人类相同或无法区分的智能行为的能力的测试。你会学到什么如何成为钢铁侠技术栈项目类型:全栈前端:HTML、CSS、Typ

1.4 前端工程化--阅读笔记

前端工程化是最近几年才兴起的一个方向。之前前端的业务逻辑比较简单,前端资源作为web服务器的一种附带,没有必要搞专门的工程化。在其他开发领域早就高度工程化了,比如web服务器开发。前端工程化的目的提高效率,解放生产力。通过制定规范,借助工具和框架,解决一些痛点和难点和一些重复性劳动。前端工程化的衡量标准:快,准,稳。提高开发速度尽量减少一些逻辑错误,减少测试时间角色分工,准确定位bug责任人前端工

CloudBase Webify,专为Web开发者打造云上开发部署平台

中文名:Web应用托管)正式上线,这是一个专为Web开发者打造的云上开发、部署平台,帮助开发者快速开发、预览、部署自己的Web应用。前往Webify快速开始页面,选择自己的代码仓库,或者从现有的模板中,创建你的第一个Web应用。一、Webify想要解决什么问题?对于大多数前端开发者而言,互联网的基础设施也许不那么友好。例如,将一个前端项目从零开始发布上线到公网,通常需要考虑到下面的事情:申请域名,