前端项目部署记

7,742 阅读3分钟

购买服务器

服务器是计算机的一种,它比普通计算机运行更快、负载更高、价格更贵。服务器在网络中为其它客户机(如PC机、智能手机、ATM等终端甚至是火车系统等大型设备)提供计算或者应用服务。服务器具有高速的CPU运算能力、长时间的可靠运行、强大的I/O外部数据吞吐能力以及更好的扩展性。 选取免费的体验的服务器做为测试 腾讯云

演示的服务器系统是 ubuntu

购买域名

域名(英语:Domain Name),又称网域,是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称,用于在数据传输时对计算机的定位标识(有时也指地理位置)。

由于IP地址具有不方便记忆并且不能显示地址组织的名称和性质等缺点,人们设计出了域名,并通过网域名称系统(DNS,Domain Name System)来将域名和IP地址相互映射,使人更方便地访问互联网,而不用去记住能够被机器直接读取的IP地址数串。 域名购买地址

在我们学习部署中域名不是必须的,真实网站还是很有必要的,便于用户方便记住我们的网站

登入服务器

登入腾讯云后台找到我们购买的服务器、点击登录,就会弹出登登录界面,输入用户名密码即可。

image.png

image.png

安装 nginx

Nginx (engine x) 是一个高性能的HTTP反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。

  • sudo su root 切换至 root 用户,不通过 root 用户安装,后续很多文件都没有权限需要 root 才能执行
  • apt-get install nginx 下载 nginx
  • nginx -v 查看版本
  • service nginx start  启动nginx

启动 nginx 成功之后,我们通过访问服务器的 IP 地址就可以看到 nginx 的默认配置页面了。

image.png

安装 Git

拉取我们需要部署的代码

  • apt-get install git

拉去代码

  • midir www & cd www 创建 www 目录来存放代码,并进入 www 目录下
  • git clone xxx 克隆代码

配置 nginx 来做 web 项目的容器

nginx 的配置文件位置 /etc/nginx,分模块配置在目录 conf.d下新建网站的配置文件

  • cd /etc/nginx/conf.d 进入配置文件
  • sudo mkdir test.conf 创建网站的配置文件,内容如下
server {
    # 端口
    listen 80;
    #填写绑定证书的域名, 多个域名用空格隔开
    server_name test.com www.test.com;
    location / {
        # 网站目录
        root /www/test;
        index index.html;
    }
 }
  • service nginx reload 修改nginx配置文件之后需要重新载入一下配置文件
  • 通过域名test.com访问

配置 https

image.png

  • 修改 Ngixn 配置文件
server {
    #SSL 访问端口号为 443
    listen 443 ssl;
    #填写绑定证书的域名
    server_name m.test.com;
    #证书文件名称
    ssl_certificate /etc/nginx/ssl/m.test.com_bundle.crt;
    #私钥文件名称
    ssl_certificate_key /etc/nginx/ssl/m.test.com.key;
    ssl_session_timeout 5m;
    #请按照以下协议配置
    ssl_protocols TLSv1.2 TLSv1.3;
    #请按照以下套件配置,配置加密套件,写法遵循 openssl 标准。
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    location / {
        root /www/test;
        
        # 移动端
        if ($http_user_agent ~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {
                root /www/m-test;
        }
        
        index index.html;
    }
}
  • service nginx reload 修改nginx配置文件之后需要重新载入一下配置文件

【笔记不易,如对您有帮助,请点赞,谢谢】