【前端部署】Ubuntu22.04 使用nginx部署vue前端项目教程

程序猿_m

已于 2024-02-19 20:56:16 修改

阅读量5.6k

点赞数 40

于 2024-02-19 20:41:41 首次发布

本文链接：https://blog.csdn.net/weixin_53459689/article/details/136177562

版权

一.ubuntu安装nginx

1.更新本地软件包列表

sudo apt update

2.安装nginx

sudo apt install nginx

3.验证nginx是否安装成功

sudo systemctl status nginx

如果Nginx正在运行，则命令输出应该显示Active（active (running)）状态。

在这里插入图片描述

4.若nginx未运行，则输入命令进行启动

sudo service nginx start

5.查看nginx版本信息

nginx -V

6.浏览器输入ubuntu所在服务器的ip地址

在这里插入图片描述
当我们看到如图所示，即说明nginx安装成功！

二.vue项目代码打包

方式一: 在vscode的终端输入

npm run build

方式二: 点击如图的红色方形部分的npm脚本进行项目代码打包

在这里插入图片描述

打包成功,则终端输出信息如下

在这里插入图片描述

当前目录下生成的dist文件夹就是打包好的vue项目代码

在这里插入图片描述

三.ubuntu修改nginx配置文件

nginx是依赖于其配置文件进行工作的,其配置文件路径是/etc/nginx/nginx.conf

使用下面的命令来查看默认配置文件

cat /etc

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

程序猿_m

关注关注

40
点赞
踩
69

收藏

觉得还不错? 一键收藏
5
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【Linux服务器nginx前端部署详解】乌班图ubantu22.04，前端Vue项目dist包

在职后端开发工程师的学习笔记

12-14

1559

主要讲一下在Linux系统环境下（以ubantu22.04为例），如何用nginx部署前端Vue项目打包的dist静态资源。

瑞吉外卖优化-Nginx前端部署、Ubuntu怎么安装使用Nginx

花花的小脑瓜的博客

03-12

563

瑞吉外卖优化-Nginx前端部署、Ubuntu怎么安装使用Nginx

5 条评论您还未登录，请先登录后发表或查看评论

【Nginx 】Nginx 部署前端 vue 项目

web15085096641的博客

02-15

2790

在两种系统中，安装Nginx的过程都相对简单，主要区别在于使用的软件包管理器不同。这包括访问Vue应用的主页，以及尝试访问应用中的各个路由，确保它们都能正确加载。文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。在CentOS或RHEL系统上安装Nginx的过程与Ubuntu/Debian略有不同，主要体现在软件包管理器的使用上。在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。

Ubuntu使用Nginx部署前端项目——记录

Z__XY_的博客

11-30

668

我第二天重启nginx的时候，发现它报错如work_process，events相关的错误，应该是configs下的test.conf与/etc/nginx/nginx.conf中的内容发生了冲突，所以我直接将test.conf的内容（见上面）复制在nginx.conf中，才重启成功。按理说，这时我们访问localhost的时候就会访问前端代码的index文件。添加：include /etc/nginx/configs/*.conf;查看nginx的启停状态：（如果正常启动，会看到绿色的Runing）

【ubuntu】ubuntu 20.04安装docker，使用nginx部署前端项目，nginx.conf文件配置

fruge365的博客

01-16

1487

ubuntu 20.04安装docker，使用nginx部署前端项目

基于Ubuntu部署前端项目

qq_37748525的博客

08-10

1052

一、搭建开发环境参考知乎帖子：https://zhuanlan.zhihu.com/p/144946960 二、安装Nginx 1.安装nginx apt-get install nginx 2.查看版本 nginx -v 3.启动服务 service nginx start 4.查看状态 systemctl status nginx.service 5.遇到了问题解决办法： sudo lsof -i:80 查看80端口的占用情况，若是被其他程序占用了，去掉不必要的占用； 2.修改nginx配置文件

Nginx ubuntu部署前端vue2

weixin_51429125的博客

12-08

802

Nginx ubuntu部署前端vue2

ubuntu16.0下载nginx，并部署前端页面

qq_43717065的博客

06-29

999

一、nginx安装在安装nginx之前需要先安装： 1、安装gcc g++的依赖库 apt-get install build-essential apt-get install libtool 2、安装pcre依赖库 sudo apt-get update sudo apt-get install libpcre3 libpcre3-dev 3、安装zlib依赖库 apt-get install zlib1g-dev 4、安装ssl依赖库 apt-get install openssl 为什么要

ubuntu系统下通过nginx部署vue项目

weixin_43340876的博客

10-19

599

以上步骤应该足以帮助你在 Nginx 上部署 Vue 项目。根据你的具体需求，可能还需要进行其他配置，例如 SSL 加密、HTTP/2 支持等。现在，你应该可以通过浏览器访问你的 Vue 项目了。在浏览器的地址栏输入你服务器的域名或 IP 地址。首先，你需要在本地机器上构建你的 Vue 项目。编辑 Nginx 配置文件来指向 Vue 项目的。目录，其中包含了用于部署的项目文件。在你的服务器上安装 Nginx。

【Linux服务器nginx前端部署详解】ubantu22.04，前端Vue项目dist打包

m0_74825634的博客

12-25

1078

本文主要讲一下在Linux系统环境下（以ubantu22.04为例），如何用nginx部署前端Vue项目打包的dist静态资源。有些具体的命令就不展开讲了，可以自行查看其他博主的文章，我主要讲整体的步骤和思路。

Nginx使用(一) — Nginx搭建负载均衡(ubuntu-22.04.2-live-server环境)

weixin_43028273的博客

05-30

1600

ubuntu-22.04.2-live-server环境下使用VMware虚拟机搭建F5教程。nginx在 nginx.conf配置文件中通过 upstream模块和 server模块的配合使用,就可以实现负载均衡。

Linux（Ubuntu）系统部署web项目

03-28

里面包含linux需要的jdk、tomcat、测试的war包、sql文件以及部署web项目的流程，从系统jdk的安装直到web项目部署成功的详细讲解的笔记

Ubuntu 部署前端项目

weixin_45214599的博客

08-24

956

Ubuntu部署前端项目搭环境 #nginx apt-get install nginx #nodejs apt-get install nodejs #mogonDB 有需要的话下载 apt-get install mongodb #git apt-get install git #npm换源 npm config set registry https://registry.npm.taobao.org #pm2 后台运行nodejs项目相关 npm i install pm2 相关指令 n

ubuntu服务器部署Nginx之vue项目+域名+图片

搬砖

06-05

1349

提示：ubuntu使用apt；centos使用yum1.安装Nginx(默认是安装到/etc/nginx)2.查看nginx版本nginx -v3.启动nginx4.在浏览器直接输入服务器的ip进行访问，出现成功！

Ubuntu22.04 部署nginx

qq_69412524的博客

06-10

814

Nginx的主要配置文件是/etc/nginx/nginx.conf。我的防火墙已关闭，如果没有关闭防火强需要开放指定端口号。所有Nginx配置文件都位于/etc/nginx目录中。

Ubuntu系统下使用docker容器配置nginx并部署前端项目

q1430186623的博客

10-21

1092

命令描述。

Ubuntu安装Nginx,并部署vue前端代码

weixin_42361127的博客

12-06

2109

一、安装Nginx 1、下载压缩包下载地址：nginx下载 2、解压 tar -zxvf nginx-1.17.6.tar.gz 3、安装依赖进入nginx的安装目录执行命令后会发现出现错误，很多not found，我们需要添加依赖库。 1、PCRE库 ./configure: error: the HTTP rewrite module requires t...

ubuntu安装nginx并发布vue项目

huzi_1998的博客

05-28

1026

nginx.conf配置文件中并没有配置端口号和IP，这个我们需要自己手动添加，为了便于修改，我们将vue项目的配置放在其他地方文件里，在nginx.conf 只需要将vue项目的配置文件所在路径引入即可。移除 nginx 软件包以及共享的配置和数据文件，但是针对的是名为 nginx-full 的特定软件包和 nginx-common。purge命令将会移除 nginx 软件包及其相关的配置文件，完全清理掉所有与 nginx 相关的数据。使用apt-get安装后，nginx的默认路径为。

Ubantu下使用Nginx技术实现前后端网页局域网部署

c_kk_kkk的博客

08-03

397

进入默认站点:sudo cd /var/www/html。4、打开配置文件，根据自己的情况写入以下代码，保存并且关闭。7、将你的网页文件复制到/var/www/html目录下。9、浏览器输入192.168.6.201成功进入网站。3、配置Nginx以代理springboot应用。配置Nginx以服务html文件。1、使用命令安装Nginx。

你知道如何将python+vue+mysql项目部署到服务器吗？我需要具体过程

最新发布

03-23

<think>嗯，用户想知道怎么把Python+Vue+MySQL的项目部署到服务器上。首先，我得理清楚整个过程的大致步骤，确保每个部分都覆盖到。可能用户是个开发者，但可能对服务器部署不太熟悉，所以需要详细但易懂的步骤。首先，用户的项目结构应该是前端用Vue，后端用Python，比如Django或Flask，再加上MySQL数据库。部署的话，通常需要服务器、域名、配置环境这些。我得考虑常见的服务器选择，比如阿里云、腾讯云这些，还有Ubuntu系统，因为比较常用。然后，步骤大概分几部分：准备服务器、部署后端、部署前端、配置数据库、域名和Nginx反向代理，以及最后的维护。每个部分都需要详细说明，比如服务器设置包括更新系统、安装必要工具，可能还要配置防火墙。这里需要注意用户可能不熟悉ufw或者apt命令，得写清楚命令和步骤。部署后端部分，得考虑Python环境，比如用virtualenv或者直接安装依赖。还要处理项目文件的上传，可能用git或者scp。这里要提醒用户安装依赖，比如Gunicorn和Nginx的配置，特别是Nginx的反向代理设置，可能需要给出示例配置文件的内容。还有Gunicorn的服务配置，用systemd来管理，确保服务在后台运行。前端部署的话，Vue项目需要先构建生成静态文件，然后用Nginx来托管。可能需要指导用户如何修改nginx配置，指定root目录。同时，跨域问题可能在后端已经处理了，但如果有的话，可能需要提醒。数据库方面，MySQL的安装和配置，创建用户和数据库，还有导入数据。这里要注意安全，比如设置root密码，限制远程访问，或者使用ssh隧道，避免直接暴露端口。用户可能需要知道如何导出本地数据并导入到服务器，用mysqldump命令。域名和HTTPS部分，需要解释如何解析域名到服务器IP，然后用Certbot申请SSL证书，这涉及到安装Certbot和自动配置Nginx。这部分可能需要根据不同的操作系统给出具体命令，比如Ubuntu用的apt命令。维护方面，可能需要用Git来更新代码，然后重启服务。另外，备份数据库和代码的步骤也很重要，提醒用户定期备份，避免数据丢失。用户可能遇到的问题包括权限设置、服务启动失败、端口冲突、静态文件路径错误等，需要给出一些排查建议，比如查看日志，检查配置文件语法。此外，安全方面需要强调防火墙设置，避免不必要的端口开放，使用SSH密钥登录，禁用root远程登录等。最后，整个流程要尽量详细，但不要过于复杂，让用户一步步跟着做就能完成部署。可能还需要根据用户使用的具体框架调整步骤，比如如果用的是Flask，可能和Django的部署稍有不同，但整体流程相似。确保每个命令和配置文件的示例正确，避免用户复制粘贴时出错。</think>以下是将Python+Vue+MySQL项目部署到服务器的具体操作流程，分为六个关键步骤： --- ### 一、服务器基础准备 1. **服务器选择** - 推荐使用阿里云/腾讯云/华为云，选择Ubuntu 22.04 LTS系统 - 安全组开放端口：22(SSH), 80(HTTP), 443(HTTPS), 3306(MySQL按需开放) 2. **系统初始化** ```bash ssh root@your_server_ip # 连接服务器 apt update && apt upgrade -y # 更新系统 apt install -y git nginx mysql-server python3-pip python3-venv nodejs npm # 安装基础工具 ufw allow 22,80,443/tcp # 配置防火墙 ``` --- ### 二、Python后端部署（以Flask为例） 1. **项目上传** ```bash cd /var/www git clone https://github.com/yourname/backend.git # 或使用scp上传 cd backend && python3 -m venv venv source venv/bin/activate pip install -r requirements.txt # 包含gunicorn依赖 ``` 2. **Gunicorn+Nginx配置** ```ini # /etc/systemd/system/flask.service [Unit] Description=Gunicorn instance for Flask After=network.target [Service] User=root WorkingDirectory=/var/www/backend ExecStart=/var/www/backend/venv/bin/gunicorn -w 4 -b 0.0.0.0:5000 app:app Restart=always [Install] WantedBy=multi-user.target ``` ```bash systemctl daemon-reload systemctl start flask && systemctl enable flask ``` 3. **Nginx反向代理** ```nginx # /etc/nginx/sites-available/backend server { listen 80; server_name api.yourdomain.com; location / { proxy_pass http://127.0.0.1:5000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } ``` ```bash ln -s /etc/nginx/sites-available/backend /etc/nginx/sites-enabled/ nginx -t && systemctl reload nginx ``` --- ### 三、Vue前端部署 1. **构建生产环境代码** ```bash cd frontend npm install npm run build # 生成dist目录 ``` 2. **Nginx托管静态文件** ```nginx # /etc/nginx/sites-available/frontend server { listen 80; server_name yourdomain.com; root /var/www/frontend/dist; index index.html; location / { try_files $uri $uri/ /index.html; } } ``` --- ### 四、MySQL数据库配置 1. **安全初始化** ```bash mysql_secure_installation # 设置root密码/删除测试库等 mysql -u root -p ``` ```sql CREATE DATABASE projectdb; CREATE USER 'projectuser'@'localhost' IDENTIFIED BY 'your_password'; GRANT ALL PRIVILEGES ON projectdb.* TO 'projectuser'@'localhost'; FLUSH PRIVILEGES; ``` 2. **导入本地数据** ```bash # 本地导出 mysqldump -u root -p projectdb > backup.sql # 服务器导入 scp backup.sql root@your_server_ip:/tmp mysql -u projectuser -p projectdb < /tmp/backup.sql ``` --- ### 五、域名与HTTPS配置 1. **域名解析** - 在域名控制台添加A记录：@ 和 www 指向服务器IP 2. **SSL证书申请** ```bash snap install --classic certbot certbot --nginx # 按提示选择要加密的域名 ``` --- ### 六、运维管理 1. **服务更新流程** ```bash cd /var/www/backend git pull systemctl restart flask ``` 2. **数据库备份** ```bash # 每日自动备份 crontab -e 0 3 * * * mysqldump -u projectuser -p'password' projectdb > /backups/db_$(date +\%F).sql ``` --- ### 常见问题排查 1. **服务启动失败** - 查看日志：`journalctl -u flask -f` - 检查端口占用：`netstat -tulnp | grep :5000` 2. **跨域问题** - 确认后端已配置CORS中间件 - 检查Nginx的`proxy_set_header`配置 3. **静态文件404** - 确认`nginx -t`通过配置检查 - 检查文件权限：`chmod -R 755 /var/www/frontend/dist` --- ### 安全建议 1. 使用SSH密钥登录代替密码登录 2. MySQL不要开放外网访问（通过SSH隧道连接） 3. 定期更新系统补丁：`unattended-upgrades` 部署完成后，可通过`https://yourdomain.com`访问前端，`https://api.yourdomain.com`访问后端API。