服务器部署前端代码

最近需要开发网站，但好像没找到比较好的部署前端流程说明，特此记录一下自己的部署流程，仅供参考。

本服务器系统为Ubuntu，不清楚其它系统也是否适用本流程。

1.安装Nginx

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，其占用内存少、并发能力强、能支持高达 5w 个并发连接数。

更多可以了解 万字总结，体系化带你全面认识 Nginx ！

1.安装

sudo apt install nginx

检查是否安装成功

nginx -v

2.前端代码打包

可以了解下 前端 – 什么是”打包”?

1.在前端项目目录下运行npm run build，进行打包

npm run build

打包完成后会在目录下生成一个build文件夹（或者dist），build生成的这些东西便是要放在服务器中的文件了。

当然如果目前没有项目目录单纯测试部署前端的话可以简单写个html文件，不用打包，只上传个html就行。

2.将生成的包上传至服务器中，这边我用的工具是winscp，上传路径自定义，我一般都上传至/var/www/目录下。

3.修改Nginx配置文件

配置文件目录下/etc/nginx/的 sites-available 文件夹主要存放站点配置文件，其中default文件为虚拟站点的配置模板，自己的虚拟站点可以以此为模板进行配置。后续当有多个网站或者部署后端使也是在该文件下进行配置，这时就需要用到域名来解析各个网站的请求了。

1.进入编辑/etc/nginx/sites-enabled/default

vim /etc/nginx/sites-enabled/default

2.修改配置文件

关于文件中各参数的了解可以参考 写给Web开发人员看的Nginx介绍 ，建议先了解里面各个参数。

目前要修改的地方有root部分，root定义的就是代码包存放的路径，即之前上传至服务器的代码包路径。

如果是项目包的话还需要修改location部分，新增try_files $uri $uri/ /index.html;，这将能使各个页面能够被正常打开。

server {
    listen 80 default_server;   # 默认监听外部请求的80端口
    listen [::]:80 default_server;

    #root /var/www/html; 
    root /var/www/racing_web;   #变动这里~


    # Add index.php to the list if you are using PHP
    # index index.html index.htm index.nginx-debian.html;

    index index.html;

    server_name _; #匹配url地址,_代表服务器的ip，如果有域名配置好了即可填域名

    location / {
        try_files $uri $uri/ /index.html; #变动这里~
    }

}

3.修改完成后，重新启动Nginx

可以参考 Nginx常用命令

systemctl reload nginx 

之后访问服务器IP地址便能得到你的页面了。