手把手教你使用Ubuntu安装Nginx并进行网站部署

概述

  • 系统:Ubuntu Server 20.04 LTS 64bit
  • Nginx版本:1.18.0
  • 我使用的腾讯云轻量应用服务器
  • 记录了Nginx的安装,网站文件的部署,Nginx配置,以及域名解析。
  • 请准备好你的网页文件,如果没有,可以在浏览器上随便找个网站按下ctrl+s进行实验。

Step1 安装Nginx

首先使用nginx -v查看nginx是否已经被安装。

nginx

  • 使用apt-get安装,如果你的系统不是Ubuntu,可以查看网上其他安装教程。

  • sudo apt-get install nginx

  • 输入你的root密码

  • 使用service nginx start启动nginx服务。

  • 我这里报了一个错Job for nginx.service failed because the control process exited with error code. See "systemctl status nginx.service" and "journalctl -xe" for details.是因为之前docker的一个镜像已经占用了端口,如果你也有这个问题,尝试解除端口QQ截图20220715140142

  • 这时访问你的服务器公网ip,就可以查看Nginx的默认欢迎页了

  • QQ截图20220715140544

Step2 上传网络文件

  • 方法1:好像现在腾讯云的webshell可以支持文件上传了

    QQ截图20220715141011

  • 安装Xftp

  • 我是用的vscode+ssh链接,连上服务器之后,直接通过vscode打开服务器文件夹,然后拖动上传。

QQ截图20220715141431

Step3 配置Nginx

Nginx配置的方法有很多种,这里介绍比较简单的方式。

  • 首先打开文件夹/etc/nginx,查看nginx.conf中,http{}里面有没有 include /etc/nginx/conf.d/*.conf;这一行,如果有,http会包含conf.d文件夹里面后缀为conf的配置文件,如果没有,就加上。(你在这步可以使用vim等工具,我用的vscode)

  • 然后在conf.d文件夹中,创建一个文件,文件名字任意,后面加上.conf就行,我创建的tama.conf

  • 然后修改配置文件。

    • server{
      	listen port;
      	server_name 域名(或者ip);
      	location /{
      		root folder;
      		index file.html;
      	}
      	
      }
      
    • 通过nginx还能进行其他配置,比如错误页面,允许/禁止的ip等。

    • 如果你是像要通过端口访问你的网页,就通过listen 指定端口;

    • 如果你通过域名访问,配置server_name 你的域名

    • root 你的网站文件夹地址

    • index 你的网站首页文件

      比如我这里监听的12345端口,通过ip:port的方式,访问到index.html文件。

      注意,如果你使用的云服务器,记得添加防火墙规则,放开你的指定端口

      QQ截图20220715143550

修改完成配置之后,记得先使用nginx -t查看配置文件写的是否正确,如果报错,请仔细检查文件。

QQ截图20220715145139

显示test is successful之后,重新载入配置文件。

nginx -s reload 

此时已经可以通过ip:port的方式访问。

下面再附上两个命令(修改配置文件后reload就行,没有必要重启)

nginx -s reopen      # 重启 Nginx
nginx -s stop        # 停止 Nginx

Step4 添加域名解析

  • 如果你不想通过一长串ip+port访问你的个人网站,而是通过域名,请先自备一个域名(大概几十块到一百一年,如果你不是买的.com那种)。
  • 如果你的服务器在国内,可能会有人打电话叫你备案,不要担心,只要你不违法,不会出事。填好你的个人信息即可。
  • QQ截图20220715151323
  • 打开域名解析控制台,我这里用的腾讯云,按照它的提示填上你的ip就可以了。(不能填端口,Nginx会根据你的域名定位到使用哪个虚拟主机)

QQ截图20220715151630

这个时候就已经可以通过网址访问你的网页了(我这里html只有一个img元素)

题外话

  • Nginx还有很多其他的功能, 可以反向代理、作为邮件服务器、区分不同的请求实现动静分离…还有负载均衡,可扩展性强,而且占用资源少,这些可以尝试通过其他实验了解。
  • 云服务器真的好贵,学生有点消费不起…
  • 欢迎交流
  • 0
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以按照以下步骤在Ubuntu安装Nginx部署Vue项目: 1. 更新系统:使用以下命令更新你的Ubuntu系统: ``` sudo apt update sudo apt upgrade ``` 2. 安装Nginx使用以下命令安装Nginx: ``` sudo apt install nginx ``` 3. 配置Nginx:默认情况下,Nginx将在`/var/www/html`目录下查找网页文件。你可以通过编辑Nginx配置文件进行自定义配置。使用以下命令打开默认配置文件: ``` sudo nano /etc/nginx/sites-available/default ``` 4. 在配置文件中,将`root`指令的值更改为你Vue项目的构建文件所在的路径。例如,如果你的Vue项目构建后的文件位于`/var/www/html/my-vue-project/dist`目录下,你可以将以下行更改为: ``` root /var/www/html/my-vue-project/dist; ``` 5. 保存并关闭文件。然后使用以下命令重启Nginx以应用更改: ``` sudo service nginx restart ``` 6. 部署Vue项目:将你的Vue项目构建为静态文件,并将构建后的文件复制到Nginx指定的目录中。使用以下命令进行构建: ``` cd your-vue-project-directory npm run build ``` 在构建完成后,将构建后的文件复制到Nginx指定的目录中。例如,使用以下命令将构建后的文件复制到`/var/www/html/my-vue-project/dist`目录下: ``` sudo cp -r dist/* /var/www/html/my-vue-project ``` 7. 现在,你的Vue项目已经部署Nginx上。你可以通过在浏览器中输入服务器的IP地址或域名来访问它。 请注意,上述步骤假定你已经在Ubuntu安装了Node.js和npm,并且已经在Vue项目中配置了正确的构建设置。如果你还没有安装Node.js和npm,你可以通过以下命令进行安装: ``` sudo apt install nodejs sudo apt install npm ``` 希望对你有帮助!如果你还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值