网站图片设置链接,晋中网站设计,wordpress获取当前分类下的子分类,wordpress缩略图外链前言#xff1a; 在信息化和数字化的今天#xff0c;网站和应用的构建与发布已成为企业发展的重要一环。为了确保项目的顺利上线和稳定运行#xff0c;选择合适的工具和环境至关重要。本文将详细介绍如何通过XShell工具以及Nginx环境来实现服务器项目的构建与发布#xff0…前言 在信息化和数字化的今天网站和应用的构建与发布已成为企业发展的重要一环。为了确保项目的顺利上线和稳定运行选择合适的工具和环境至关重要。本文将详细介绍如何通过XShell工具以及Nginx环境来实现服务器项目的构建与发布为广大开发者提供一条高效、便捷的路径。如果想学习Ubuntu系统下载和学习资料的可以私我如果需要的人多的话将会发布一篇关于Ubuntu系统的介绍。 一、为什么需要打包项目 浏览器只能识别并运行html、css、js 文件 。 换句话而言项目中用vue react框架做的项目文件浏览器是不认识的。 而打包的过程就是把 vue 的关键文件打包成 html、css、js 的文件让浏览器进行识别并展示我们的项目。 二、打包之后项目可以通过浏览器直接访问吗 通过 npm run build 打包项目之后打包的文件会被放入到 dist文件夹中然后我们直接双击 index.html文件可以发现浏览器是无法显示项目的。原因是因为一些文件找不到了。 查看我们的url可以发现其实我们的url是一个file协议。那么对应的文件路径就会编程盘符下的在我们当前的盘符下没有对应的文件那么自然是无法找到的。 而想要解决这个问题的话就需要把我们的项目运行到一个服务器上并且把项目部署到服务器之中这样我们就可以访问啦。 而服务器的存在就是为了可以托管我们的项目从而避免出现模块无法被找到的问题。 三、域名、DNS、公网IP、服务器、Nginx之间的关系 1. 域名https://blog.csdn.net/weixin_63152500?typelately 域名是一个容易识别和记忆的网址如https://www.zhihu.com/。它是用户访问网站时输入的网址方便用户记忆和访问而不需要记住复杂的IP地址。 2. DNS域名解析服务器 DNS是Domain Name System的缩写是一个分布式的目录服务将用户易于记忆的域名与服务器IP地址进行关联。当用户输入域名时DNS服务器会查询并将域名转换为相应的IP地址从而帮助用户访问到目标服务器。 3. 公网IP服务器在网络中的唯一地址 公网IP是服务器在互联网上的唯一地址当DNS将域名解析为IP地址时这个IP地址就是公网IP。用户通过这个公网IP地址可以访问到部署在服务器上的服务。 4. 服务器服务部署的电脑 服务器是一台高性能的计算机用于存储、处理和传输数据。在Web服务中服务器通常用于部署和运行网站和应用程序。用户可以通过访问服务器的公网IP地址或使用域名来访问这些服务。 5. Nginx网页服务 Nginx是一个高性能的HTTP和反向代理web服务器特点是占有内存少并发能力强有报告表明能支持高达50000个并发连接数。在Web服务中Nginx通常用于处理大量的并发连接提供静态文件服务通过Nginx可以实现负载均衡、SSL加密、访问控制等功能提高网站的性能和安全性。 四、XSHELL和XFTP安装 打开XShell官网点击所有下载-所有家庭/学校免费版。 下载地址:
XSHELL和XFTP安装地址https://www.xshell.com/zh/free-for-home-school/
五、服务器购买 1、服务器可在华为云阿里云腾讯云官网上根据需求选择合适的服务器类型。
华为云对象存储服务器OBShttps://console.huaweicloud.com/console/?regioncn-east-3#/home 阿里云对象存储OSShttps://www.aliyun.com/product/oss 腾讯云轻量应用服务器https://console.cloud.tencent.com/lighthouse/instance/index?rid1
2、购买后拿到服务器IP用户名和密码。
3、打开管理控制台您可以找到服务器的配置选项然后找到通信或网络相关的设置进行端口的配置。 如果是自己编写的程序一般使用1024以后的端口号到65535.1023之前都是熟知端口。8081端口号通常用于 HTTP 代理或 Web 代理服务器的服务端口tomcat文件服务器端口号为8060 uni-ui的端口号为8080前端项目使用8081。
六、Xshell连接服务器
双击空白处新建会话名称自定义主机填写服务器IP ctrl鼠标点击会话输入服务器用户名和密码 显示连接成功 七、使用XSHELL工具搭建Nginx环境步骤 注意当前是在 / 路径下执行可以使用pwd命令查看如果是 /root 下要执行 cd / 命令 1、pwd命令查看当前路径 pwd 2、如果是/root 路径要改变成 / cd / 3、首先 sudo apt update 4、nginx编译时依赖gcc环境 sudo apt install gcc g 5、安装prce让 nginx支持重写功能 sudo apt search pcre* 6、安装zlib, nginx使用zlib对http包内容进行gzip压缩 sudo apt install zlib1g zlib1g-dev 7、安装openssl用于通讯加密 sudo apt install openssl libssl-dev 8、进行nginx安装 mkdir nginx 9、进入nginx文件夹 cd nginx/ 10、在nginx中下载nginx压缩包 wget https://nginx.org/download/nginx-1.22.0.tar.gz 11、解压nginx tar -zxvf nginx-1.22.0.tar.gz 12、进入nginx-1.22.0目录中查看 cd nginx-1.22.0/ 13、查看可执行文件 ll 14、在nginx-1.22.0目录中检查平台安装环境 ./configure --prefix/usr/local/nginx 15、如果不能执行make命令先安装再执行 sudo apt install make 16、进行源码编译 make 17、安装nginx make install 18、查看nginx配置 /usr/local/nginx/sbin/nginx -t 19、 若不想执行复杂/usr/local/nginx/sbin/nginx -t来查看则需要制作软连接制作nginx软连接进入进入usr/bin目录 cd /usr/bin/ 20、制作软连接 ln -s /usr/local/nginx/sbin/nginx nginx 21、接下来制作开始配置文件首先进入到nginx的默认配置文件中 vim /usr/local/nginx/conf/nginx.conf 80改成8001并且在该文件在最底部增加配置项按下i进入输入模式如图 22、按下esc键通过:wq!保存并退出 23、返回并进入nginx目录下
注意若此时找不到nginx文件可能是cd /与最初进来的路径变化了看到的是根目录下的文件和目录列表而不是你最初进入的家目录中的文件和目录列表。所以最开始需要cd /切换路径此时解决方法退出重进该新建会话 cd / cd nginx/ 24、在nginx文件中创建新的配置文件 touch nginx.conf 25、进入到nginx.conf文件 vim nginx.conf 26、写入如下配置
# muying- datav-report
server{
# 端口
listen 80;
# 域名
server_name localhost;
# 资源地址
root /nginx/dist/;
# 目录浏览
autoindex on;
# 缓存处理
add_header Cache-Control no-cache, must-revalidate;
# 请求配置
location / {
# 跨域
add_header Access-Control-Allow-Origin *;
# 返回 index.html
try_files $uri $uri/ /index.html;
}
} 27、通过esc wq保存退出 Esc :wq 28、在nginx中创建dist文件夹并进入dist文件夹下 mkdir dist cd dsit/ 29、在nginx/dist文件夹中写如 index.html进行测试 touch index.html vim index.html 然后编写 hello world 30、通过nginx -s reload重启服务
nginx -s reload 31、检查 nginx -t 32、在浏览器中通过IP测试访问 nginx -c /etc/nginx/nginx.conf 33、重新加载 Nginx 配置的命令 nginx -s reload 34、然后打开网页输入服务器ip地址就可以访问啦如果是你的将会显示“hello world ”如下方地址实例本人亲测
大数据驱动的云端智能停车场可视化管理平台http://118.178.232.152:8001/#/
35、检查服务是否正常运行 sudo service nginx status 八、使用XFTP上传文件
1、连接XFTP
工具栏的xshell右边的绿色小图标xftp点击会自动连接 2、然后确保右边框是在dist文件夹下 3、上传文件
将打包好的文件拖拽到右边覆盖或者删除重新上传
4、重启nginx
退出后然后重新再执行一遍启动nginx nginx -t nginx -c /etc/nginx/nginx.conf nginx -s reload 5、这样就成功上传到服务器啦
6、域名使用
如果想要使用域名将域名与服务器绑定就在nginx下的nginx.conf文件中然后重新启动nginx listen 80 server_name 域名 九、遇到报错如何解决
1、如果nginx安装有问题重新安装 Nginx
检查nginx是否正常运行 sudo systemctl status nginx 或者 sudo service nginx status 卸载当前损坏的 Nginx 安装如果有的话 sudo apt remove nginx 清理旧版本的配置文件和依赖 sudo apt purge nginx* 更新软件包列表 sudo apt update 安装nginx sudo apt install nginx 安装完成后尝试启动 Nginx 服务 sudo systemctl start nginx 检查 Nginx 服务的状态 sudo service nginx status 2、端口被占用
执行nginx -c /etc/nginx/nginx.conf发现端口被占用如果不是正在使用的项目或者是服务状态报错可能占用了端口需要找出并删除重启就好了。步骤如下 查找哪个进程正在使用端口 如8081端口 sudo netstat -tulnp | grep 8001 结束进程sudo kill -9 [PID] 然后重启nginx nginx -c /etc/nginx/nginx.conf nginx -t nginx -s reload 3、执行命令的路径有问题
容易忽略产生报错的问题本人亲自尝试找了半天就是最最最开始的命令要执行一遍cd /,
不要在root下面进行命令不然过程感觉都是对的没有问题就是运行打不开项目。
4、低版本nginx包
当你安装了一个低版本的nginx包的时候可能会出现不兼容执行make命令会报错会提示有
make下有几个.c文件报错。
使用vim 项目打开进行修改.
当时本人遇到是是说switch下的case需要添加/* fall through */注释来告诉编译器这是故意的。
如果fall through不是故意的
你需要在每个case块的末尾添加break语句来防止代码继续执行下一个case块。
然后esc :wq退出
返回文件重新执行make
本人亲测毛用没有哈哈可能是能力不够吧然后就卸载了nginx安装包打开nginx官网下载了可以试用的版本目前这个版本nginx-1.22.0本人亲测有效。
5、nginx官网地址
NGINXhttps://www.nginx-cn.net/
