目录一.查看服务器的内核二.开始部署前端项目到服务器1.服务器上安装nginx2.创建nginx欢迎页3.访问服务器的Nginx服务4.创建服务器存放vue项目的文件夹5.将本地vue项目打包获取dist文件夹6.将本地dist文件夹上传至服务器的vue项目所在的文件夹7.配置 Nginx 从而使之托管你的前端①创建并编辑配置文件②检查并应用配置8.访问页面看看是否生效三.后续代码需要更新如何重新发版一.查看服务器的内核二.开始部署前端项目到服务器1.服务器上安装nginx# 1. 更新包管理器索引 (这一步在 Ubuntu 上非常重要相当于 yum 的刷新缓存) sudo apt update # 2. 安装 Nginx # (Ubuntu 默认源里就有不需要安装 epel-release) sudo apt install nginx -y # 3. 启动 Nginx 并设置开机自启 (这部分和你原来的命令一样) sudo systemctl start nginx sudo systemctl enable nginx # 4. (可选) 检查状态 sudo systemctl status nginx2.创建nginx欢迎页# 创建真正的nginx欢迎页面 cat EOF | sudo tee /usr/share/nginx/html/index.html !DOCTYPE html html head titleWelcome to nginx!/title style body { width: 35em; margin: 0 auto; font-family: Tahoma, Verdana, Arial, sans-serif; } /style /head body h1Welcome to nginx!/h1 pIf you see this page, the nginx web server is successfully installed and working. Further configuration is required./p pFor online documentation and support please refer to a hrefhttp://nginx.org/nginx.org/a.br/ Commercial support is available at a hrefhttp://nginx.com/nginx.com/a./p pemThank you for using nginx./em/p pemServer Time: $(date)/em/p /body /html EOF3.访问服务器的Nginx服务4.创建服务器存放vue项目的文件夹/dev/vue/5.将本地vue项目打包获取dist文件夹执行npm run build命令6.将本地dist文件夹上传至服务器的vue项目所在的文件夹7.配置 Nginx 从而使之托管你的前端①创建并编辑配置文件sudo cat /etc/nginx/conf.d/vue-app.conf EOF输入完上述命令将如下代码粘贴到命令行然后敲个回车在输入EOF三个字母即可。server { listen 80; server_name 你的服务器的ip; # 指向Vue项目的dist目录 root /dev/vue/dist; index index.html; # 配置Vue Router的history模式支持 location / { try_files $uri $uri/ /index.html; } # 静态资源缓存配置 location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ { expires 1y; add_header Cache-Control public, immutable; } # 禁止访问隐藏文件 location ~ /\. { deny all; } # 日志配置 access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; # 限制上传大小如果需要 client_max_body_size 10M; }思考为什么要这么写直接VIM不行吗答案你要用vim粘贴内容肯定格式会乱直接用我这个格式不会乱。②检查并应用配置# 测试nginx配置语法 sudo nginx -t # 如果没有语法错误重启nginx sudo systemctl restart nginx # 查看nginx状态 sudo systemctl status nginx8.访问页面看看是否生效可见部署成功符合预期。三.后续代码需要更新如何重新发版当你需要更新项目时只需①在本地重新运行npm run build②然后将新的dist文件夹内容上传覆盖服务器上的旧文件最后重新加载 Nginx (sudo systemctl reload nginx) 即可。以上就是本篇文章的全部内容喜欢的话可以留个免费的关注呦~~~
前端项目部署到服务器
目录一.查看服务器的内核二.开始部署前端项目到服务器1.服务器上安装nginx2.创建nginx欢迎页3.访问服务器的Nginx服务4.创建服务器存放vue项目的文件夹5.将本地vue项目打包获取dist文件夹6.将本地dist文件夹上传至服务器的vue项目所在的文件夹7.配置 Nginx 从而使之托管你的前端①创建并编辑配置文件②检查并应用配置8.访问页面看看是否生效三.后续代码需要更新如何重新发版一.查看服务器的内核二.开始部署前端项目到服务器1.服务器上安装nginx# 1. 更新包管理器索引 (这一步在 Ubuntu 上非常重要相当于 yum 的刷新缓存) sudo apt update # 2. 安装 Nginx # (Ubuntu 默认源里就有不需要安装 epel-release) sudo apt install nginx -y # 3. 启动 Nginx 并设置开机自启 (这部分和你原来的命令一样) sudo systemctl start nginx sudo systemctl enable nginx # 4. (可选) 检查状态 sudo systemctl status nginx2.创建nginx欢迎页# 创建真正的nginx欢迎页面 cat EOF | sudo tee /usr/share/nginx/html/index.html !DOCTYPE html html head titleWelcome to nginx!/title style body { width: 35em; margin: 0 auto; font-family: Tahoma, Verdana, Arial, sans-serif; } /style /head body h1Welcome to nginx!/h1 pIf you see this page, the nginx web server is successfully installed and working. Further configuration is required./p pFor online documentation and support please refer to a hrefhttp://nginx.org/nginx.org/a.br/ Commercial support is available at a hrefhttp://nginx.com/nginx.com/a./p pemThank you for using nginx./em/p pemServer Time: $(date)/em/p /body /html EOF3.访问服务器的Nginx服务4.创建服务器存放vue项目的文件夹/dev/vue/5.将本地vue项目打包获取dist文件夹执行npm run build命令6.将本地dist文件夹上传至服务器的vue项目所在的文件夹7.配置 Nginx 从而使之托管你的前端①创建并编辑配置文件sudo cat /etc/nginx/conf.d/vue-app.conf EOF输入完上述命令将如下代码粘贴到命令行然后敲个回车在输入EOF三个字母即可。server { listen 80; server_name 你的服务器的ip; # 指向Vue项目的dist目录 root /dev/vue/dist; index index.html; # 配置Vue Router的history模式支持 location / { try_files $uri $uri/ /index.html; } # 静态资源缓存配置 location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ { expires 1y; add_header Cache-Control public, immutable; } # 禁止访问隐藏文件 location ~ /\. { deny all; } # 日志配置 access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; # 限制上传大小如果需要 client_max_body_size 10M; }思考为什么要这么写直接VIM不行吗答案你要用vim粘贴内容肯定格式会乱直接用我这个格式不会乱。②检查并应用配置# 测试nginx配置语法 sudo nginx -t # 如果没有语法错误重启nginx sudo systemctl restart nginx # 查看nginx状态 sudo systemctl status nginx8.访问页面看看是否生效可见部署成功符合预期。三.后续代码需要更新如何重新发版当你需要更新项目时只需①在本地重新运行npm run build②然后将新的dist文件夹内容上传覆盖服务器上的旧文件最后重新加载 Nginx (sudo systemctl reload nginx) 即可。以上就是本篇文章的全部内容喜欢的话可以留个免费的关注呦~~~
