哪个网站可以做店招店标轮播,淮安网站建设服务,wordpress主题iphoto,房屋中介网站建设学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes
觉得有帮助的同学#xff0c;可以点心心支持一下哈#xff08;笔记是根据b站尚硅谷的前端讲师【张天禹老师】整理的#xff0c;用于自己复盘#xff0c;有需要学习的可以去b站学习原版视频可以点心心支持一下哈笔记是根据b站尚硅谷的前端讲师【张天禹老师】整理的用于自己复盘有需要学习的可以去b站学习原版视频
本教程将详细介绍如何将前端项目进行打包并部署到不同的服务器环境包括本地服务器、Nginx服务器和云服务器。本教程将详细介绍如何将前端项目进行打包并部署到不同的服务器环境包括本地服务器、Nginx服务器和云服务器。
一、项目打包
我们开发用的脚手架其实就是一个微型服务器用于支撑开发环境、运行代理服务器等。
打包完的文件中不存在.vue、.jsx、.less等文件而是html、css、js等。
打包后的文件不再借助脚手架运行而是需要部署到服务器上运行。
打包前请务必梳理好前端项目的ajax封装请求前缀、代理规则等。
打开package.json执行打包命令npm run build:prod 这里我演示的是黑马的一个项目
账号13800000002
密码hm#qd23!
后端服务器地址https://heimahr.itheima.net/api
生产环境http://localhost:9528/prod-api
开发环境https://localhost:9528/api
二、部署方式
1.本地服务器部署
本次我们使用express框架在本地创建一个服务器
安装express
前提是电脑已经安装了node
新建一个文件夹执行npm init -y命令生成package.json再执行npm add express命令下载express成功之后如下图。 每次修改代码时都要重新启动服务器比较麻烦所以提出了热部署nodemon,安装命令npm i nodemon -g
最后完整代码如下
const express require(express)
const app express()
const port 9528// 配置静态资源
app.use(express.static(__dirname /public))app.listen(port, () {console.log(本地服务器启动http://localhost:${port})
})
执行命令nodemon .\app.js浏览器输入http://localhost:9528会出现这个页面 解决刷新404问题
①打包时更改路由配置使用hash模式缺点请求路径不美观有#不够优雅 ②使用node相关的库(connect-history-api-fallback )
官网地址npm | Home
下载connect-history-api-fallback
npm install --save connect-history-api-fallback
完整代码
const express require(express)
var history require(connect-history-api-fallback)const app express()
app.use(history())
const port 9528// 配置静态资源
app.use(express.static(__dirname /public))app.listen(port, () {console.log(本地服务器启动http://localhost:${port})
})
请求无法发送问题
使用node相关的库(http-proxy-middleware )
下载http-proxy-middleware
npm i http-proxy-middleware
完整代码
const express require(express)
var history require(connect-history-api-fallback)
const { createProxyMiddleware } require(http-proxy-middleware)
const app express()
app.use(history())
const port 9528// 配置静态资源
app.use(express.static(__dirname /public))
app.use(/prod-api,createProxyMiddleware({target: https://heimahr.itheima.net/api,changeOrigin: true,pathRewrite: { ^/prod-api: }})
)
app.listen(port, () {console.log(本地服务器启动http://localhost:${port})
})
2.nginx服务器部署
nginx简介
Nginx由俄罗斯工程师伊戈尔·赛索耶夫Igor Sysoev为rambler.ru俄罗斯访问量第二大的网站设计开发是用于 Web 服务、反向代理、内容缓存、负载均衡、媒体流传输等场景的开源软件。自2004年发布以来凭借开源的力量Nginx不断完善和成熟。 nginx部署前端项目
找到nginx安装目录修改配置文件然后双击启动nginx.exe服务注意每次修改后都需要重新启动nginx服务
解决刷新404问题
location / {root E:\dist;index index.html index.htm;try_files $uri $uri/ /index.html;#解决刷新404}
请求无法发送问题
location /prod-api/ {# 设置代理目标proxy_pass https://heimahr.itheima.net/api/;}
3.云服务器部署
前提要有一个属于自己的云服务器并下载好liunx系统本地电脑安装Xftp、Xshell软件
Xftp用于传输文件
Xshell用于编写命令
本地资源上传
将打包好的文件上传到远程服务器我们这里可以使用Xftp比较简单
首先打开Xftp点击新建然后输入主机地址点击连接接着根据提示输入用户默认是root、密码如下图。 连接成功后如下图左边是你的本地文件右边是远程服务器的文件 接下来把你需要上传的文件直接拖入到远程目录下就可以上传。
这里我把我的打包文件放在了/www/server/hr这个目录下大家可以自己选择建议不要放在root文件下面会有权限的问题 远程服务器下传nginx
使用Xshell软件连接远程服务器和Xftp类似点击新建然后输入主机地址点击连接接着根据提示输入用户默认是root、密码如下图。 连接成功后如下图接着可以这这里敲命令~ 下载nginx
yum install nginx
查看nginx的版本 查看nginx的安装位置
ps -aux|grep nginx nginx配置
找到nginx目录下的conf/nginx.conf文件之前在本地怎么配置的远程也是一样的~
server {listen 8110;server_name 主机ip地址;location / {root /www/server/hr;index index.html index.htm;try_files $uri $uri/ /index.html;#解决刷新404}location /prod-api/ {# 设置代理目标proxy_pass https://heimahr.itheima.net/api/;}error_page 500 502 503 504 /50x.html;location /50x.html {root html;}}
我这里用的8110端口因为默认的端口跑了其他的项目大家如果使用的是默认的80端口接下的配置可以不用看直接跳到启动nginx那里~
nginx新增对外开放端口方法
需要添加防火墙对外开放端口
firewall-cmd --list-all 查看开放的端口号 sudo firewall-cmd --add-port8110/tcp --permanent 开放8110端
重启防火墙firewall-cmd --reload
此时再去通过浏览器访问 注意如果这时还是不能访问就需要去自己的云服务器官网打开相关端口。
这里我以阿里云服务器为例进入首页后打开控制台找到服务器实例点击安全组如下图。 点击管理规则在入方向这里进行端口的配置 此时再去通过浏览器访问就可以正常访问了
启动nginx
service nginx start
常见命令
检查nginx配置文件是否正常 nginx -t
重启nginx nginx -s reload
成功运行截图
